object-fit
object-fit controls how replaced content such as images or video fills its box. It is essential when the container size is fixed but the media source dimensions vary.
Overview
object-fit controls how replaced content such as images or video fills its box. It is essential when the container size is fixed but the media source dimensions vary.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 32 | 79 | 36 | 10 | 32 | 10 | |
contain | 32 | 79 | 36 | 10 | 32 | 10 |
cover | 32 | 79 | 36 | 10 | 32 | 10 |
fill | 32 | 79 | 36 | 10 | 32 | 10 |
none | 32 | 79 | 36 | 10 | 32 | 10 |
scale-down | 32 | 79 | 36 | 10 | 32 | 10 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (79)
Implementation note
- Only supported for `<img>` elements.
Syntax
CSS
/* Crop while maintaining aspect ratio */
.thumbnail {
width: 200px;
height: 200px;
object-fit: cover;
object-position: center;
}
/* Fit within the container while maintaining the aspect ratio */
.gallery-image {
width: 100%;
height: 300px;
object-fit: contain;
}Live demo
Use cases
Thumbnail grids
Use object-fit: cover to keep cards visually balanced even when uploaded images have mixed dimensions.
Video shells
Keep media framed properly inside consistent components without stretching or distortion.
Cautions
- cover may crop important content, so check focal points and essential text inside images.
- object-fit only affects replaced elements like img or video, not regular block backgrounds.
Accessibility
- If cropping is possible, ensure critical information is not placed near the edges of the asset.
Related links
Powered by web-features