Responsive images without the background-image hack
Cropped responsive images were done with background-image and background-size: cover on a div. No semantic img element, no alt text, and no native lazy loading. object-fit brings the same cropping behavior to real img elements.
2img {
3 object-fit: cover;
4 width: 100%; height: 200px;
5}
2<div class="card-image"></div>
3.card-image {
4 background-image: url(photo.jpg);
5 background-size: cover;
6 background-position: center;
7}
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
Semantic HTML
A real img element with alt text. Screen readers and search engines see the image correctly.
Native lazy loading
img supports loading="lazy" natively. Background images require Intersection Observer to achieve the same.
object-position
Control which part of the image is visible with object-position. Same concept as background-position.
How it works
Cropped images in card layouts used background-image on a div with background-size: cover. Visually it worked, but it meant no <img> element, no alt attribute, no native lazy loading, and no srcset for responsive images.
object-fit: cover applies directly to an <img> element. The image fills its container and is cropped to fit, just like background-size: cover. object-position controls which part stays visible, matching background-position. The image stays semantic, accessible, and gets native browser optimization.