CSS Layout
Aspect Ratio & Object Fit
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
coverfills the box and may crop the content.containshows the whole object and may leave empty space.fillstretches to both dimensions.scale-downchooses the smaller result ofnoneorcontain.
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
| Property | Purpose | Example |
|---|---|---|
| aspect-ratio | Supplies a preferred width-to-height ratio. | aspect-ratio: 16 / 9 |
| object-fit | Controls how replaced content fits its box. | object-fit: cover |
| object-position | Positions replaced content inside its box. | object-position: center top |
| image-rendering | Controls 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-ratio | 88 | 88 | 89 | 15 |
| object-fit | 32 | 79 | 36 | 10 |
| image-rendering: crisp-edges | 148 | 148 | 65 | 7 |
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.