This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
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.
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;
}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."" class="autoAndRatio" loading="lazy" src="https://www.matuzo.at/media/pages/blog/2022/100daysof-day51/a7a4de5a3a-1698950578/neue-donau.webp">
<div class="autoAndRatio"></div>My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-12-05T00:00:00+00:00) Day 51: aspect-ratio and replaced elements. Retrieved from https://www.scien.cx/2022/12/05/day-51-aspect-ratio-and-replaced-elements-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.