Day 51: aspect-ratio and replaced elements

posted on

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

Most elements have no preferred aspect ratio. On day 42 I’ve explained how you can use the aspect-ratio property to define a ratio for these elements. Replaced elements like <iframe>, <video>, <embed>, or <img>, on the other hand, have an intrinsic aspect ratio. This means that you don’t have to define one using the aspect-ratio property and they will scale naturally.

Natural ratio. The danube river in Vienna.

You can change the aspect ratio of an image by using aspect-ratio and defining either a height or width with a value other than auto.

img {
  width: 400px;
  aspect-ratio: 1;
}
Skewed, square image. The danube river in Vienna."

The default value of the aspect-ratio property is auto (depending on the element, it’s either no preferred aspect ratio or the natural, intrinsic aspect ratio.). You can change the value to a ratio (1, 16/9, 666/666, etc.), or you can do both.

.autoAndRatio {
  width: 400px;
  aspect-ratio: auto 3 / 1;
}

If you both specify auto and a ratio together, replaced elements will use their natural aspect ratio (auto) and all other elements the specified ratio (16 / 9).

<img alt="The danube river in Vienna.&quot;" class="autoAndRatio" loading="lazy" src="https://matuzo.at/media/pages/blog/2022/100daysof-day51/a7a4de5a3a-1698950578/neue-donau.webp">
<div class="autoAndRatio"></div>
Natural ratio. The danube river in Vienna."

See on CodePen

Further reading

Overview: 100 Days Of More Or Less Modern CSS