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.
@frontendmentor There is another interesting property called object-position which can be used to adjust the position of image inside the surrounding box
@frontendmentor I discovered this object-fit property very recently too while working on a projects that has Card Grid with images. I have been using it so much since then that I have started adding img { object-fit: cover} in my css
@frontendmentor So, u mean in a carousel I should use img instead of background-image?
@frontendmentor Why use this over background-size?
