aspect-ratio
============

The **`aspect-ratio`** CSS property allows you to define the desired width-to-height ratio of an element's box. This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio. The specified aspect ratio is used in the calculation of auto sizes and some other layout functions.

At least one of the box's sizes needs to be automatic in order for `aspect-ratio` to have any effect. If neither the width nor height is an automatic size, then the provided aspect ratio has no effect on the box's preferred sizes.

Try it
------

Syntax
------


```css
aspect-ratio: 1 / 1;
aspect-ratio: 1;

/\* fallback to 'auto' for replaced elements \*/
aspect-ratio: auto 3/4;
aspect-ratio: 9/6 auto;

/\* Global values \*/
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;
```


This property is specified as one or both of the keyword auto or a `<ratio>`. If both are given, then If the element is a replaced element, such as `<img>`, then the given ratio is used until the content is loaded. After the content is loaded, the `auto` value is applied, so the intrinsic aspect ratio of the loaded content is used.

If the element is not a replaced element, then the given `ratio` is used.

### 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`. 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`.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements except inline boxes and internal ruby or table boxes |
| Inherited | no |
| Computed value | as specified |
| Animation type | by computed value type |

Formal syntax
-------------
```

aspect-ratio =   
  auto     ||  
  <ratio>    
  
<ratio> =   
  <number [0,∞]> [ / <number [0,∞]> ]?    
  
```

Examples
--------

### Exploring aspect-ratio effects with fixed width

In this example, the width of the `<div>` elements has been set to `100px` and height to `auto`. Since the width value is fixed here, the `aspect-ratio` property affects only the height of the `<div>` elements to maintain the specified width-to-height ratio.
```

<div>1/1</div>
<div>0.5</div>
<div>1</div>
<div>1/0.5</div>
<div>16/9</div>
```


```
div {
  display: inline-flex;
  background-color: lime;
  justify-content: center;
}
```



```css
div {
  width: 100px;
  height: auto;
}
div:nth-child(1) {
  aspect-ratio: 1/1;
}
div:nth-child(2) {
  aspect-ratio: 0.5;
}
div:nth-child(3) {
  aspect-ratio: 1;
}
div:nth-child(4) {
  aspect-ratio: 1/0.5;
}
div:nth-child(5) {
  aspect-ratio: 16/9;
}
```

### Fallback to natural aspect ratio

In this example we are using two`<img>` elements. The first element does not have its `src` attribute set to an image file.


```html
<img src="" /> <img src="plumeria.jpg" />
```


The following code sets `3/2` as the preferred aspect ratio and `auto` as a fallback.


```css
img {
  display: inline;
  width: 200px;
  border: 2px dashed red;
  background-color: lime;
  vertical-align: top;

  aspect-ratio: 3/2 auto;
}
```


Note how the first image without replaced content keeps the `3/2` aspect ratio, while the second image after the content is loaded uses the image's natural aspect ratio.

Specifications
--------------

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # aspect-ratio |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Image aspect-ratio: preventing jank
* Designing an aspect ratio unit for CSS
* Setting Height And Width On Images Is Important Again