object-fit
Setting how the content should be resized to fit its container.
Overview
| Class | Declarations |
|---|---|
object-fit:none | object-fit: none;
|
object-contain | object-fit: contain;
|
object-cover | object-fit: cover;
|
object-fill | object-fit: fill;
|
object-scale-down | object-fit: scale-down;
|
object-fit:<value> | object-fit: <value>;
|
Examples
Cover a fixed frame
The same 320 × 200 source fills two explicit 220 × 220 image boxes. object-cover keeps the natural ratio and crops excess width; object-fill stretches each axis independently.
<!-- Cover · preserved proportions --><img id="target" src="/demo/landscape.svg" width="320" height="200" alt="Blue and violet mountains beneath a yellow sun" class="block width:220px height:220px max-w:100% bg-surface-base object-cover object-right" /><!-- Fill · stretched to the square --><img id="target" src="/demo/landscape.svg" width="320" height="200" alt="Blue and violet mountains beneath a yellow sun" class="block width:220px height:220px max-w:100% bg-surface-base object-fill object-right" />Generated CSS
@layer utilities { .object-cover { object-fit: cover } .object-fill { object-fit: fill }}Right alignment keeps the sun in view. The sun stays round with cover and becomes an ellipse with fill. These classes size the content inside the image element; they do not change its layout dimensions. The SVG source allows its viewport to stretch so the fill comparison remains visible.
Contain the full media
object-contain fits the whole source inside the square while keeping its ratio. Compare it with cover in the same geometry.
<!-- Contain · complete artwork --><img id="target" src="/demo/landscape.svg" width="320" height="200" alt="Blue and violet mountains beneath a yellow sun" class="block width:220px height:220px max-w:100% bg-surface-base object-contain object-right" /><!-- Cover · cropped width --><img id="target" src="/demo/landscape.svg" width="320" height="200" alt="Blue and violet mountains beneath a yellow sun" class="block width:220px height:220px max-w:100% bg-surface-base object-cover object-right" />The unused bands show the image element’s own background. The image content is about 220 × 137.5 here, while its layout box remains 220 × 220. Use object-position to move the content within that box.
Disable object fitting
object-fit:none uses the source’s natural 320 × 200 size. In this narrower box, content clips at the left edge. object-scale-down chooses the smaller result of none and contain.
<!-- None · natural size, clipped left edge --><img id="target" src="/demo/landscape.svg" width="320" height="200" alt="Blue and violet mountains beneath a yellow sun" class="block width:220px height:220px max-w:100% bg-surface-base object-right object-fit:none" /><!-- Scale down · shrink the full source --><img id="target" src="/demo/landscape.svg" width="320" height="200" alt="Blue and violet mountains beneath a yellow sun" class="block width:220px height:220px max-w:100% bg-surface-base object-right object-scale-down" />Both samples retain the same 220 × 220 layout box. Scale-down may shrink media but does not enlarge it beyond the none result. Explicit width and height are necessary to make this fitting comparison meaningful.
Apply conditionally
Widen the preview to sm to switch from cover to contain. Print also uses contain so the complete image remains visible.
<!-- Cover → contain at sm --><img id="target" src="/demo/landscape.svg" width="320" height="200" alt="Blue and violet mountains beneath a yellow sun" class="block width:220px height:220px max-w:100% bg-surface-base object-cover object-right object-contain@print object-contain@screen@sm" />The responsive rule uses the iframe’s real viewport. The authored square stays the same size; only the way its source fits changes.