This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Yes, I know, aspect-ratio is not the hottest shit, but Safari only starting supporting it in version 15 and there’s a lot I didn’t know about the property. That’s reason enough for me to write about it. :)
Defining ratios
You can use the aspect-ratio property to define the preferred aspect ratio for a box by defining a preferred width and height.
The maximum width of the following element is 400px, and due to the defined ratio of 16 / 9 the height equals 225px (400 / 16 * 9) = 225). If the available width gets below 400, the height scales accordingly.
div {
aspect-ratio: 16 / 9; /* aspect-ratio: width / height */
max-width: 400px;
}Instead of writing aspect-ratio: 16 / 9 we can also write aspect-ratio: 400 / 225.
div {
aspect-ratio: 400 / 225;
max-width: 400px;
}Squares
If you want to create a square, you need a ratio of 1:1, or 42:42, or 742617000027:742617000027;
div {
aspect-ratio: 1 / 1;
max-width: 400px;
}That's the same as writing aspect-ratio: 1 because if you omit the second value, the value for the height is 1 by default.
div {
aspect-ratio: 1;
max-width: 400px;
}Single value ratios
If aspect-ratio: 1 equals aspect-ratio: 1 / 1, this means that aspect-ratio: 4 equals aspect-ratio: 4 / 1.
div {
aspect-ratio: 4;
max-width: 400px;
}width, height, and aspect-ratio
aspect-ratio has no effect if you set the value of both the width and height to something other than auto.
div {
aspect-ratio: 16 / 9;
width: 250px;
height: 250px;
}preferred, not enforced ratio
If the content of your box is larger than the preferred height, content won't be cut-off but the box grows with its content, ignoring the ratio.
div {
aspect-ratio: 4;
max-width: 400px;
}- A
- B
- C
- D
- E
- F
You can change the behaviour by defining a different value for the overflow property.
div {
aspect-ratio: 4;
max-width: 400px;
overflow: auto;
}- A
- B
- C
- D
- E
- F
This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-11-22T09:38:54+00:00) Day 42: aspect-ratio. Retrieved from https://www.scien.cx/2022/11/22/day-42-aspect-ratio/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.