Home / Snippets / Color & Theming /
object-fit: cover for responsive media
Compare object-fit: cover, contain, and fill — choose the right fit behaviour for images, videos, and media elements in fixed-dimension containers.
Quick implementation
/* Cover: fills the box, crops edges if needed */
.media-cover {
width: 100%;
height: 12rem;
object-fit: cover;
}
/* Contain: fits entirely inside the box, may letterbox */
.media-contain {
width: 100%;
height: 12rem;
object-fit: contain;
}
/* Fill: stretches to fill — may distort */
.media-fill {
width: 100%;
height: 12rem;
object-fit: fill;
}
/* Control the crop anchor point (default: center) */
.media-cover { object-position: top center; }Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building a responsive media component library.
Goal: Demonstrate object-fit: cover, contain, and fill on img and video elements inside fixed-dimension containers — no JavaScript.
Technical constraints:
- Set an explicit width (100%) and height (12rem) on each media element.
- Apply object-fit: cover, object-fit: contain, and object-fit: fill as separate utility classes.
- Use object-position to control the crop anchor on cover — default to center, provide a variant for top.
- Use oklch() for any placeholder or background colors — no hex or rgba().
- Show all three variants side by side in a CSS grid row.
Framework variant (pick one):
A) Vanilla CSS — three utility classes (.media-cover, .media-contain, .media-fill) plus an object-position helper.
B) React component — accept fit prop ("cover" | "contain" | "fill"), position prop, width, and height as optional props.
Edge cases to handle:
- object-fit is only effective on replaced elements (img, video, canvas, embed) — document that it does not apply to div backgrounds.
- For a div-based placeholder, use background-size: cover/contain as the equivalent.
- Warn that object-fit: fill ignores the intrinsic aspect ratio and distorts the media.
- Provide a note on using aspect-ratio in combination to avoid explicit height declarations.
Return CSS.Why this matters in 2026
object-fit solves one of the most common responsive image problems: fitting media of unknown dimensions into a designed layout slot without distortion or overflow. It is the direct equivalent of background-size but for replaced elements like <img> and <video>. Choosing the right value — cover, contain, or fill — is a deliberate design decision that affects visual quality, cropping, and accessibility.
The logic
object-fit: cover scales the media to fill the container entirely, cropping any overflow — analogous to background-size: cover. contain scales the media to fit entirely within the box, potentially leaving empty space (letterboxing). fill ignores the aspect ratio and stretches the media to fill the container exactly — usually the wrong choice for photos. Use object-position to shift the crop anchor when cover would cut off important content at the default centre point; object-position: top center is common for portrait photos where the subject is near the top.
Accessibility & performance
object-fit is purely presentational and has no effect on the accessibility tree. Always provide descriptive alt text — the cropping applied by cover or the letterboxing of contain does not change the semantic meaning of the image. For performance, combine with loading="lazy" on below-fold images and explicit width and height attributes on the <img> element so the browser can calculate the layout box before the image loads, even without an aspect-ratio declaration.