object-fit
How the picture of an `<img>` or `<video>` fits into the element's box.
Syntax
object-fit: cover;Values
| Parameter | Type | Description |
|---|---|---|
| fill | keyword | Stretched to the box, proportions are lost (the default). |
| cover | keyword | Covers the box keeping proportions; the edges are cut off. |
| contain | keyword | Fits entirely keeping proportions; empty areas may remain. |
| none | keyword | Natural size, cropped by the box. |
Examples
A wide photo in a square box:
<style>
img { width: 120px; height: 120px; border: 1px solid gray; background: whitesmoke; }
</style>
<img src="/media/photo-400x250.jpg" alt="" style="object-fit: fill;">
<img src="/media/photo-400x250.jpg" alt="" style="object-fit: cover;">
<img src="/media/photo-400x250.jpg" alt="" style="object-fit: contain;">Notes
object-fit only matters when both the width and the height of the element are set. Which part of the picture stays visible is controlled by object-position.
See also
- object-position — Which part of a cropped `<img>` or `<video>` stays visible.
- aspect-ratio — The ratio of width to height: the browser computes the missing dimension.
- background-size — The size of a background image.
- <img> — An image.
Related recipes
In the tutorial
- Responsive images — How pictures adapt to the screen — max-width, aspect-ratio, object-fit, the srcset and sizes attributes, the picture element.