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
<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.
You can change the aspect ratio of an image by using
aspect-ratio and defining either a
width with a value other than
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 (
666/666, etc.), or you can do both.
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 src="/images/neue-donau.webp" alt="The danube river in Vienna." class="autoAndRatio">
See on CodePen.