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.
It is documented as part of the CSS Images specification.
Syntax
/* Usage Example */
.profile-image {
width: 200px;
height: 200px;
object-fit: cover;
/* ensures the image fills the 200x200 square without distortion */
}
/* Syntax */
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
/* Global values */
object-fit: inherit;
object-fit: initial;
object-fit: revert;
object-fit: revert-layer;
object-fit: unset;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.
32+
36+
10+
79+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more