# aspect-ratio property

The `aspect-ratio` property specifies an alignment of elements along the transverse axis for flex blocks and along the inline axis for grids. Applies to parent element.

## Syntax

`selector { aspect-ratio: auto or ratio; }`

## Values

Values | Description
--- | ---
`auto` | An element does not have a preferred aspect ratio and the browser sets it automatically based on the element's width and height.
`ratio` | The ratio is written as `16/9`, here the first number is a width, and the second number is a height. If a value is not specified, it is considered equal to `1`. It is also possible to write some ratios as one number. For example, `2/1` can be written as `0.5`, this will give the same result.
`auto && ratio` | If the aspect ratio comes with the `auto` keyword (example: `auto` `1/2`), then the specified ratio will be selected, but for the elements being replaced (such as images and videos) with its own ratio it will only be used.

## Example

Let's set the button to `auto` aspect ratio:

`<p> <button>Click</button> </p>` `button { aspect-ratio: auto; background-color: #9DDFA4; padding: 1em; }`

:

## Example

Now let's set the aspect ratio for the button as `1/2`:

`<p> <button>Click</button> </p>` `button { aspect-ratio: 1/2; background-color: #9DDFA4; padding: 1em; }`

:

## See also

- the `object-fit` property
  that scales elements

← →
↑
en ru