aspect-ratio

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;

Values

<auto>
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.
<ratio>
The box’s preferred aspect ratio is the specified ratio of width / height. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing.

Formal definition

Initial valueauto
Applies toall elements except inline boxes and internal ruby or table boxes
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

auto | <ratio>

Examples

Examples of values for aspect-ratio

aspect-ratio: 1 / 1; 
aspect-ratio: 16 / 9;

Mapping width and height to aspect-ratio

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.

Specifications

Specification Status Comment
CSS Box Sizing Module Level 4
The definition of 'aspect-ratio' in that specification.
Editor's Draft Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
aspect-ratioChrome Full support 84
Disabled
Full support 84
Disabled
Disabled From version 84: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox Partial support 83
Notes Disabled
Partial support 83
Notes Disabled
Notes Firefox 83 implements aspect-ratio for flex items.
Disabled From version 83: this feature is behind the layout.css.aspect-ratio.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Partial support 81
Notes Disabled
Notes Firefox 81 implements aspect-ratio for blocks and replaced elements.
Disabled From version 81: this feature is behind the layout.css.aspect-ratio.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also