CSS Aspect Ratio

Imagine a picture frame factory that used to need a worker to measure height from width by hand every time an order came in, using padding tricks and extra wrapper elements just to keep frames from looking stretched. The aspect-ratio property replaced that manual work with a single instruction: keep this box's width and height in a fixed ratio, like 16 by 9, no matter what size it ends up being. Now video players, product photos, and placeholder boxes can hold their shape automatically as the screen resizes, without the old padding-bottom percentage hack.

In this page:

Basic Syntax of aspect-ratio
16 by 9 Video Containers
Square Images in a Gallery
Responsive Boxes That Hold Their Shape
Falling Back Before aspect-ratio Existed

Basic Syntax of aspect-ratio

The aspect-ratio property accepts a width and height separated by a forward slash, and the browser computes the missing dimension from whichever one is set. This means you only ever need to set a width or a height, not both, and the browser handles the rest.

Note: You can write aspect-ratio: 1 as shorthand for a perfect square, equivalent to aspect-ratio: 1 / 1.

Warning: aspect-ratio is ignored if the element has no defined width and its content does not naturally establish one, always give the box a width first.

Example: Basic Syntax of aspect-ratio

css

<style>
.box {
  width: 300px;
  aspect-ratio: 16 / 9;
  background: steelblue;
  color: white;
}
</style>
<div class="box">Height computed automatically from the width</div>

16 by 9 Video Containers

16 by 9 is the standard widescreen video ratio, and aspect-ratio makes embedding responsive video players simple without wrapper divs or padding tricks. Before this property existed, developers relied on a padding-top percentage hack to achieve the same responsive effect.

Note: Set width: 100% alongside aspect-ratio: 16 / 9 on an iframe so the video fills its parent's width and derives height automatically.

Warning: Some embed providers set an explicit height attribute on their iframe, which can override your aspect-ratio unless you also reset height in CSS.

Example: 16 by 9 Video Containers

css

<style>
iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}
</style>
<iframe src="about:blank"></iframe>

Square Images in a Gallery

A 1 by 1 ratio keeps thumbnail grids visually consistent even when source photos come in different original sizes. This avoids the layout jump that happens when images of varying dimensions load into fixed-size grid cells.

Note: Combine aspect-ratio: 1 with object-fit: cover on the inner img so every thumbnail is both square and uncropped-looking.

Warning: Without object-fit: cover, an image inside a square aspect-ratio box will simply stretch to fill it if it doesn't share the same natural ratio.

Example: Square Images in a Gallery

css

<style>
img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 150px;
}
</style>
<img src="https://placehold.co/300x200" alt="Cropped to a perfect square">

Responsive Boxes That Hold Their Shape

aspect-ratio is not limited to media, any box such as a card, banner, or map placeholder can hold a consistent shape as its width changes on different screens. This makes it a general-purpose layout tool, not just an image-specific property.

Note: Use aspect-ratio on skeleton loading placeholders so the page layout does not jump once real content replaces them.

Warning: If the box's content is taller than the ratio allows, the content can overflow unless you also set overflow: hidden or auto.

Example: Responsive Boxes That Hold Their Shape

css

<style>
.card {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: steelblue;
  color: white;
}
</style>
<div class="card">Holds its shape as width changes</div>

Falling Back Before aspect-ratio Existed

Older codebases used the padding-bottom percentage trick, applying padding-bottom as a percentage of width on an empty element to force a ratio, since percentage padding is always calculated from width.

Note: When supporting very old browsers, keep the padding-bottom hack as a fallback alongside a modern aspect-ratio declaration.

Warning: The padding-bottom hack requires absolutely positioning the inner content, which adds extra markup that aspect-ratio makes unnecessary.

Example: Falling Back Before aspect-ratio Existed

css

<style>
.ratio-box {
  position: relative;
  padding-bottom: 56.25%;
  background: #ddd;
}
.ratio-box > * {
  position: absolute;
  inset: 0;
  background: steelblue;
  color: white;
}
</style>
<div class="ratio-box">
  <div>The old padding-bottom percentage trick</div>
</div>

Common Mistakes

Setting both aspect-ratio and an explicit height, an explicit height always overrides the ratio and the property has no visible effect.
Writing the ratio backwards, aspect-ratio: 9 / 16 produces a tall portrait box instead of a wide landscape one.
Forgetting that aspect-ratio only reserves shape, it does not automatically crop or fit media, you still need object-fit for images inside it.

Chapter Summary

aspect-ratio: width / height locks a box's proportions so height is derived automatically from its width.
It replaces the old padding-bottom percentage hack for responsive video and image containers.
Combine aspect-ratio with object-fit: cover on inner media to keep both the box shape and the image proportions correct.

Browser Support

aspect-ratio is supported by all modern browsers since 2021, older browsers ignore it silently and fall back to the natural height of the content.

🔒

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Writing Modes Next Lesson → CSS Object Fit