aspect-ratio
The ratio of width to height: the browser computes the missing dimension.
Syntax
aspect-ratio: width / height;Values
| Parameter | Type | Description |
|---|---|---|
| w / h | ratio | A ratio: `16 / 9`, `4 / 3`. |
| number | number | The same as a single number: `1` is a square. |
| auto | keyword | The element's natural ratio (for images). |
Examples
A video-shaped block and a square:
<style>
.video { aspect-ratio: 16 / 9; background: black; color: white; width: 100%; max-width: 320px; }
.square { aspect-ratio: 1; width: 80px; background: coral; }
</style>
<div class="video">16 / 9</div>
<p></p>
<div class="square"></div>Notes
Together with object-fit: cover it gives images of different sizes the same shape, as in a product grid. If both width and height are set, aspect-ratio is ignored.
See also
- object-fit — How the picture of an `<img>` or `<video>` fits into the element's box.
- width — The width of an element.
- height — The height of an element.
Related recipes
In the tutorial
- Responsive images — How pictures adapt to the screen — max-width, aspect-ratio, object-fit, the srcset and sizes attributes, the picture element.