If you need to set a height & width on an img element but don't want it to become distorted, use object-fit. This handy CSS property will allow you to resize the image while maintaining its aspect ratio. It behaves like background-size allowing values like cover and contain! 🙌

This will save you from using background-image in your CSS when you should be using an img element which is bad for #a11y. If the image adds context to your content, be sure to use an img in your HTML. If it's purely decorative, background-image in your CSS is fine to use.