Object Fit and Object Position
The Problem
When images or videos are placed inside fixed-dimension containers, they get stretched or distorted because replaced elements default to object-fit: fill. Developers often work around this by switching to background-image on a <div>, which sacrifices semantics, accessibility (alt text), native lazy loading, and SEO discoverability. The correct solution for <img> and <video> elements is object-fit, which controls how the content fills its box without leaving HTML behind.
The Solution
object-fit controls how a replaced element's content is resized to fit its container. It works the same way background-size works for background images, but on actual <img>, <video>, and other replaced elements. object-position then controls the alignment of the content within the element's box, letting you pick the focal point.
Core Principles
object-fit Values
fill(default) — Stretches the content to fill the box exactly. Ignores aspect ratio. Almost never what you want for photos.contain— Scales the content to fit entirely inside the box while preserving aspect ratio. May leave empty space (letterboxing).cover— Scales the content to cover the entire box while preserving aspect ratio. Parts of the image may be clipped.none— No resizing at all. The content is displayed at its intrinsic size. Overflows are clipped.scale-down— Acts asnoneorcontain, whichever produces a smaller result. Prevents upscaling.
object-position
Works exactly like background-position. It accepts keyword values (top, center, right), percentages, or length values. The default is 50% 50% (centered). This is how you control the focal point when object-fit: cover clips the image.
Relationship with aspect-ratio
The aspect-ratio property defines the box's proportions, while object-fit controls how the content fills that box. They work together: set aspect-ratio on the element to define the container shape, then use object-fit to control how the image content adapts to that shape.
img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
This gives you a responsive image that always maintains a 16:9 frame while the photo inside fills it edge-to-edge.
Live Previews
Quick Reference
| Scenario | CSS |
|---|---|
| Image fills container, preserving ratio, clipping edges | object-fit: cover |
| Image fits inside container with letterboxing | object-fit: contain |
| Image at intrinsic size, no resizing | object-fit: none |
| Prevent upscaling beyond intrinsic size | object-fit: scale-down |
| Control focal point when cover clips | object-position: top or object-position: 25% 75% |
| Responsive 16:9 frame with cover | aspect-ratio: 16/9; object-fit: cover |
| Circular avatar from any aspect ratio | border-radius: 50%; object-fit: cover |
Common AI Mistakes
- Using
background-imageinstead ofobject-fit. When the content is a meaningful image (not decorative), use<img>withobject-fit. Reservebackground-imagefor purely decorative backgrounds. - Forgetting to set explicit dimensions on the image.
object-fitonly has a visible effect when the element's box size differs from the content's intrinsic size. Setwidthandheight(or useaspect-ratio) on the<img>. - Not setting
display: blockon images inside cards. Inline images have a small gap below them due to baseline alignment. Adddisplay: blockto remove it. - Using
object-fit: fillintentionally.fillis the default and stretches the image. If you explicitly setobject-fit: fill, you are distorting the image. Usecoverorcontaininstead. - Ignoring
object-positionwhen usingcover. The default centering may crop the wrong part of the image. Useobject-positionto control which part stays visible. - Not combining
aspect-ratiowithobject-fit. Setting onlywidth: 100%withoutaspect-ratioor a fixedheightmeans the image box follows its intrinsic ratio, makingobject-fitunnecessary.