The aspect-ratio
CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.
aspect-ratio: 1 / 1; /* Global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset;
<auto>
<ratio>
width
/ height
. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing
.Initial value | auto |
---|---|
Applies to | all elements except inline boxes and internal ruby or table boxes |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
auto | <ratio>
aspect-ratio: 1 / 1; aspect-ratio: 16 / 9;
Browsers have added an internal aspect-ratio
property that applies to replaced elements and other related elements that accept width
and height
attributes. This appears in the browser's internal UA stylesheet.
In Firefox, the internal stylesheet rule looks like this:
img, input[type="image"], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(height); }
You can read more about this feature in Setting Height And Width On Images Is Important Again.
Specification | Status | Comment |
---|---|---|
CSS Box Sizing Module Level 4 The definition of 'aspect-ratio' in that specification. | Editor's Draft | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
aspect-ratio
|
79
|
79
|
71
|
No | No | 14
|
Internal mapping of width and height | 79 | 79 | 71
|
No | No | 14 |
Mobile | ||||||
---|---|---|---|---|---|---|
aspect-ratio
|
79
|
79
|
No | No | 14
|
12.0
|
Internal mapping of width and height | 79 | 79 | No | No | 14 | 12.0 |
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio