object-fit controls how the content of a replaced element, such as an image or video, fits inside that element’s own box. Set the dimensions on the image itself to make the choice visible.
Compare contain with cover
Both image boxes are 180×120; their source artwork is 300×100. Contain keeps the complete picture and leaves unused space. Cover fills the box and crops the picture’s sides.
HTML and CSS
HTML
<p>Contain</p>
<img
class="sample contain"
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22100%22%3E%3Crect%20width%3D%22150%22%20height%3D%22100%22%20fill%3D%22%232563eb%22%2F%3E%3Crect%20x%3D%22150%22%20width%3D%22150%22%20height%3D%22100%22%20fill%3D%22%230f766e%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2250%22%20r%3D%2224%22%20fill%3D%22white%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%2250%22%20r%3D%2224%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"
alt="Two colored halves with white circles near the outer edges"
/>
<p>Cover</p>
<img
class="sample cover"
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22100%22%3E%3Crect%20width%3D%22150%22%20height%3D%22100%22%20fill%3D%22%232563eb%22%2F%3E%3Crect%20x%3D%22150%22%20width%3D%22150%22%20height%3D%22100%22%20fill%3D%22%230f766e%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2250%22%20r%3D%2224%22%20fill%3D%22white%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%2250%22%20r%3D%2224%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"
alt="Two colored halves with white circles near the outer edges"
/>CSS
.sample {
width: 180px;
height: 120px;
background: #e2e8f0;
display: block;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Avoid enlarging a small source
Scale-down uses whichever result is smaller: none or contain. This 300×100 image remains at its natural size inside a 320×140 box; contain would enlarge it to 320px wide.
HTML and CSS
HTML
<img
class="sample"
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22100%22%3E%3Crect%20width%3D%22150%22%20height%3D%22100%22%20fill%3D%22%232563eb%22%2F%3E%3Crect%20x%3D%22150%22%20width%3D%22150%22%20height%3D%22100%22%20fill%3D%22%230f766e%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2250%22%20r%3D%2224%22%20fill%3D%22white%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%2250%22%20r%3D%2224%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"
alt="Two colored halves with white circles near the outer edges"
/>CSS
.sample {
width: 320px;
max-width: 100%;
height: 140px;
object-fit: scale-down;
background: #e2e8f0;
display: block;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Values and defaults
The initial value is fill, and object-fit is not inherited. Fill stretches the content to the box’s dimensions, which can distort its proportions. Contain preserves proportions and fits everything inside. Cover preserves proportions and fills both dimensions, cropping when necessary. None uses the content’s natural size; portions outside the content box are clipped. Scale-down chooses the smaller result of none and contain, so it never enlarges a naturally smaller image.
Common mistakes
Setting only a wrapper’s dimensions does not give its image the same dimensions. If an image’s box already matches its natural ratio, cover and contain may look identical. Object-fit does not size a background image, and it does not affect iframe or embed content.
Use object-position to choose which region remains visible. For meaningful images, keep a useful alt description.
Sources and browser support
MDN: object-fit describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.