object-fit
Defines how an <img> or <video> should be resized to fit its container. cover is perfect for making images fill a space without being squashed.
Quick example
.profile-image {
width: 200px;
height: 200px;
object-fit: cover;
/* ensures the image fills the 200x200 square without distortion */
}Quick facts
Initial value
fillInherited
No
Applies to
replaced elements
Animation type
discrete
Values
fillcontaincovernonescale-down object-fit Browser Support
Widely available Since 2020 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
Safe to use without fallbacks.
32+
36+
10+
79+