Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Layout

Aspect Ratio & Object Fit

Written by Published

Reserve stable media space with aspect-ratio and control how images and video fit and align inside their boxes. You will reserve stable media space and compare cover, contain, fill, scale-down, and object-position for images and video.

aspect-ratio gives a box a preferred width-to-height relationship. object-fit then controls how replaced content such as an image or video is rendered inside the box’s final dimensions.

The two properties solve different problems. A ratio reserves predictable layout space and reduces movement while media loads. Object fitting decides whether the media should crop, letterbox, or stretch once that space exists. Using only one property often leaves either the box or the image behavior undefined. This topic also connects with CSS Width and Height and Responsive Layout.

Reserve the shape before media loads

Example

css

.thumbnail {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: 0.75rem;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

aspect-ratio supplies a preferred ratio when at least one dimension is automatic. Explicit width and height can still override it.

Choose the correct fit

  • cover fills the box and may crop the content.
  • contain shows the whole object and may leave empty space.
  • fill stretches to both dimensions.
  • scale-down chooses the smaller result of none or contain.

Choose image scaling for pixel art

image-rendering: crisp-edges asks the browser to preserve hard edges when an image is enlarged. It is intended for diagrams and pixel-oriented artwork, not ordinary photographs.

Example

css

.pixel-preview {
  image-rendering: crisp-edges;
}

Replaced Element Properties

PropertyPurposeExample
aspect-ratioSupplies a preferred width-to-height ratio.aspect-ratio: 16 / 9
object-fitControls how replaced content fits its box.object-fit: cover
object-positionPositions replaced content inside its box.object-position: center top
image-renderingControls the scaling algorithm used for an image.image-rendering: crisp-edges

Complete Example

Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.

Complete runnable example

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Aspect Ratio & Object Fit example</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
    }
    main { max-width: 70rem; margin-inline: auto; }
    article, section, aside, form, .card, .panel {
      padding: 1rem;
      border: 1px solid #cbd5e1;
      border-radius: 0.6rem;
    }

.thumbnail {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: 0.75rem;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

.pixel-preview {
  image-rendering: crisp-edges;
}
  </style>
</head>
<body>
  <main class="thumbnail"><img alt="Decorative landscape" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%230ea5e9'/%3E%3Ccircle cx='620' cy='100' r='60' fill='%23fde68a'/%3E%3Cpath d='M0 360L220 180L390 340L560 220L800 390V450H0Z' fill='%230f766e'/%3E%3C/svg%3E"></main>
</body>
</html>

Browser Support

Feature
Chrome
Edge
Firefox
Safari
aspect-ratio88888915
object-fit32793610
image-rendering: crisp-edges148148657

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.

Notes

  • CSS sizing prevents layout shift, but it does not replace responsive image markup. Use srcset, sizes, or <picture> to avoid downloading needlessly large files.
  • Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
  • Use a fallback when the support table shows that one of your required browsers predates the feature.

Conclusion

Reserve media space with aspect-ratio, then choose whether the content should crop or remain fully visible.

Choose cover when filling the frame matters more than showing every edge, and contain when the complete object must remain visible. Set meaningful object positioning for important subjects, and still use responsive image markup to control download size.

PreviousIntrinsic SizingNextMulti-column Layout