This property is not as yet implemented in browsers, however some browsers are implementing this internally in order to provide the aspect ratio mapping described below.
aspect-ratio: 1 / 1; /* Global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset;
- Replaced 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.
- The box’s preferred aspect ratio is the specified ratio of
height. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by
auto | <ratio>
Mapping width and height to
Firefox has added an internal
aspect-ratio property (in version 69 onwards) that applies to replaced elements and other related elements that accept
height attributes. This appears in the browser's internal UA stylesheet. Chrome is also shipping this feature.
|CSS Intrinsic & Extrinsic Sizing Module Level 4
The definition of 'aspect-ratio' in that specification.
|Editor's Draft||Initial definition|
|Applies to||all elements except inline boxes and internal ruby or table boxes|
|Computed value||as specified|
|Canonical order||per grammar|
No compatibility data found. Please contribute data for "css.properties.aspect-ratio" (depth: 1) to the MDN compatibility data repository.