object-fit
The object-fit property controls how a replaced element such as an image fills its content box.
Syntax
object-fit: fill | contain | cover | none | scale-down;
Examples
.thumb {
width: 200px;
height: 200px;
object-fit: cover;
}
Output
Renders a 200x200 thumbnail where the image fills the square and is cropped without distortion.
Notes
cover fills and crops while preserving aspect ratio; contain fits entirely with letterboxing. Pair with object-position to control the crop focal point. Applies to img, video, and other replaced elements.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 32 |
| firefox | 36 |
| safari | 10 |
| edge | 79 |