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.
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; aspect-ratio: 1; /* Global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: revert; aspect-ratio: revert-layer; aspect-ratio: unset;
autoReplaced elements with an intrinsic aspect ratio use that aspect ratio, otherwise the box has no preferred aspect ratio. Size calculations involving intrinsic aspect ratio always work with the content box dimensions.
<ratio>The box's preferred aspect ratio is the specified ratio of width / height. If height and the preceding slash character are omitted, height defaults to 1. 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 |
aspect-ratio =
auto ||
<ratio>
<ratio> =
<number [0,∞]> [ / <number [0,∞]> ]?
aspect-ratio: 1 / 1; aspect-ratio: 16 / 9; aspect-ratio: 0.5;
| Specification |
|---|
| CSS Box Sizing Module Level 4 # aspect-ratio |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
aspect-ratio |
88
84
|
88
84
|
89
83
Firefox 83 implements aspect-ratio for flex items.
81
Firefox 81 implements aspect-ratio for blocks and replaced elements.
|
No |
74
70
|
15 |
88 |
88
84
|
89 |
63 |
15 |
15.0 |