This content originally appeared on Manuel Matuzović - Web development 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 <image>, 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 src="/images/neue-donau.webp" alt="The danube river in Vienna." class="autoAndRatio">
<div class="autoAndRatio"></div>
This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-12-05T09:38:54+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/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.