Aspect-ratio

Learn aspect ratio with aspect-ratio.

What is aspect-ratio?

Sometimes you want a box to keep a fixed ratio between width and height as the width changes. The aspect-ratio property does exactly that: it holds the width/height ratio steady.

For example, aspect-ratio: 16 / 9 keeps the height tied to the width. A 400-pixel wide box becomes 225 pixels tall. This is ideal for video placeholders and image frames.

Intrinsic ratio

Giving a box an aspect-ratio grants it an intrinsic ratio. As the width changes, the ratio holds; the height is computed automatically.

If the box holds an image and width: 100% is set, the ratio shapes the image too. Fixed-ratio placeholders, fluid images, and video frames now follow this approach as standard practice.

Leave height auto

Sometimes a box has both an aspect-ratio and a fixed height. In that case the browser prefers the explicit height; the ratio only kicks in when the width changes.

If you want a flexible ratio, just write height: auto. This lets the ratio do its job. A fixed height locks the box; the ratio then only applies when the width is set first.

Exercise Give the video placeholder a ratio

Give the .video selector aspect-ratio: 16 / 9 and height: auto. Also add background-color: black. The ratio will hold as the width changes.

Show example solution

/* give the video placeholder a ratio */
.video {
  aspect-ratio: 16 / 9;
  height: auto;
  background-color: black;
}

Test yourself

Which gives a 4-unit wide, 3-unit tall ratio?
- aspect-ratio: 3 / 4
- aspect-ratio: 4 / 3
- aspect-ratio: 4-3
- aspect-ratio: ratio(4,3)
Show answer

aspect-ratio: 4 / 3 — Correct. 4 / 3 gives a four-unit wide, three-unit tall ratio.

Write the 16:9 ratio

.video {
  aspect-ratio: ____;
}

Show answer

.video {
  aspect-ratio: 16 / 9;
}

Next lesson: Object-fit

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies