Responsive Images and Object Fit
CSS controls how replaced elements such as images and videos fit within their boxes. object-fit and object-position are useful for cards, avatars, thumbnails, and media galleries.
Responsive images also involve HTML features such as srcset and sizes; CSS alone cannot solve every image-delivery problem.
object-fit: cover
Image Cropping
.avatar {
width: 64px;
aspect-ratio: 1;
object-fit: cover;
object-position: center;
border-radius: 50%;
}💡
object-fit: cover fills the box while preserving the image's aspect ratio and cropping excess content.Key Takeaways
object-fitcontrols replaced-content fitting.- Responsive image delivery should also use appropriate HTML image attributes.
Knowledge Check
What does `object-fit: cover` do?