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 as none or contain, 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

Common AI Mistakes

• Using background-image instead of object-fit. When the content is a meaningful image (not decorative), use <img> with object-fit. Reserve background-image for purely decorative backgrounds.

• Forgetting to set explicit dimensions on the image. object-fit only has a visible effect when the element's box size differs from the content's intrinsic size. Set width and height (or use aspect-ratio) on the <img>.

• Not setting display: block on images inside cards. Inline images have a small gap below them due to baseline alignment. Add display: block to remove it.

• Using object-fit: fill intentionally. fill is the default and stretches the image. If you explicitly set object-fit: fill, you are distorting the image. Use cover or contain instead.

• Ignoring object-position when using cover. The default centering may crop the wrong part of the image. Use object-position to control which part stays visible.

• Not combining aspect-ratio with object-fit. Setting only width: 100% without aspect-ratio or a fixed height means the image box follows its intrinsic ratio, making object-fit unnecessary.

References

• object-fit — MDN Web Docs

• object-position — MDN Web Docs

• Replaced Elements — CSS-Tricks

• aspect-ratio — web.dev