← Back to CSS Course | Chapter 9: Modern CSS Features | Lesson 6 of 25

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:

  1. Basic Syntax of aspect-ratio
  2. 16 by 9 Video Containers
  3. Square Images in a Gallery
  4. Responsive Boxes That Hold Their Shape
  5. Falling Back Before aspect-ratio Existed
Syntax
css 
selector {
  aspect-ratio: width / height;
}

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.
  • Accepted values:
  • ratio — width / height, e.g. 16 / 9
  • number — single number such as 1 for a square
  • auto — uses the element's natural ratio (default)
  • auto ratio — natural ratio if available, else the given ratio
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • aspect-ratio: 16 / 9 — widescreen video
  • aspect-ratio: 4 / 3 — classic monitor
  • width: 100% — the height follows automatically
  • height: auto — needed so the ratio can apply
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.
  • Accepted values:
  • aspect-ratio: 1 / 1 — square
  • aspect-ratio: 1 — same as 1 / 1
  • object-fit: cover — fills the square without distortion
  • width: 100% — the height follows
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.
  • Accepted values:
  • aspect-ratio: <ratio> — height derived from the width
  • max-width: <length> — caps the box
  • width: <percentage> — flexible width
  • min-height — overrides the ratio if content is taller
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.
  • Accepted values:
  • aspect-ratio: 16 / 9 — modern approach
  • padding-top: 56.25% — old padding hack for 16 / 9
  • position: relative — on the wrapper for the hack
  • position: absolute — for the inner content in the hack
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>
Live Example
Related Topics

CSS Writing Modes · CSS Object Fit · CSS Logical Sizing · CSS object-position

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Setting both aspect-ratio and an explicit height, an explicit height always overrides the ratio and the property has no visible effect.
  2. Writing the ratio backwards, aspect-ratio: 9 / 16 produces a tall portrait box instead of a wide landscape one.
  3. 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

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.