Responsive Images in CSS with object-fit: cover
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.
<!-- div instead of img: no alt, not semantic --><div class="card-image"></div>.card-image { background-image: url(photo.jpg); background-size: cover; background-position: center;}<img src="photo.jpg" alt="..." loading="lazy">img { object-fit: cover; width: 100%; height: 200px;}object fit Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
Safe to use without fallbacks.
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.