Definition and Usage

The aspect-ratio property sets an element's width-to-height ratio.

This property allows you to easily maintain consistent proportions in responsive layouts by automatically calculating the missing dimension when only one size is specified.

It is especially useful for easily maintaining, adjusting, or setting the width-to-height ratio of element boxes such as images (<img>), videos (<video>), and <div> elements.

Basic Example

CSS Live Demo: aspect-ratio Click the demo button below!

Formal syntax

CSS 
selector {
    aspect-ratio: auto || <ratio>
    /*
        <ratio>:
         - The ratio of width (number) to height (number).
         - f the slash (/) is omitted, the value represents the width-to-height ratio as a single number.
    */
}

Values

Accepted values for the aspect-ratio property
auto Replaced elements like images and videos, which have a built-in width-to-height ratio (also called intrinsic aspect ratio), use their own natural proportions.
Other elements do not have an intrinsic aspect ratio. Learn more about replaced elements.
<ratio> A ratio expressed as width (number) / height (number) representing the element's width-to-height proportion. (Whitespace around the slash (/) does not affect interpretation)
If the slash (/) is omitted, the value is interpreted as a single number representing the width-to-height ratio.
Percentage (%) values are not accepted.

Syntax

CSS 
aspect-ratio: 1 / 1; /* Same as '1/1'. Whitespace around the slash (/) does not affect interpretation. */
aspect-ratio: 1;
aspect-ratio: 16/9;
aspect-ratio: 1.77;
aspect-ratio: auto;

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

Formal definition

Formal definition of the aspect-ratio property
Initial value auto
Applies to all elements except inline boxes and internal ruby or table boxes
Percentages n/a
Inherited no
Computed value specified keyword or a pair of numbers
Animation type by computed value type

Examples

Let's explore how the aspect-ratio property works through some examples.

Basic Usage

CSS 
div {
    background-color: orange;
    width: 200px;
    /*
        If height is not specified,
        the height defaults to auto.
    */
    aspect-ratio: 1; /* Equivalent to '1 / 1' */
}
HTML 
<div>Box Element</div>
Rendered Output

When It Doesn't Work

There are cases where the aspect-ratio property may not work as expected:

  • Either width or height must be auto for it to work properly.
  • It won't apply if the element is affected by align-items: stretch.
  • Percentage (%) values are not valid for aspect-ratio.

Let's take a closer look at each case.

Either width or height Must Be auto

The aspect-ratio property only works when there is room for automatic calculation. If both width and height are explicitly defined, there's no room to adjust the size based on the ratio.

CSS 
div {
    background-color: orange;
    width: 200px;
    aspect-ratio: 1;
    height: 50px;
    /*
        If height is not auto,
        the aspect-ratio will not be applied.
    */
}
HTML 
<div>Box Element</div>
Rendered Output
Not Working with align-items: stretch

If an element is affected by align-items: stretch (commonly in a flex container), the aspect-ratio property will be overridden and won’t take effect.

CSS 
.flex-box {
    display: flex;
    align-items: stretch; /* This disables aspect-ratio */
}
.box-1,
.box-2 {
    width: 100px;
}
.box-1 {
    height: 200px;
    background-color: orange;
    margin-right: 15px;
}
.box-2 {
    background-color: red;
    height: auto;
    aspect-ratio: 1 / 1;
    /*
        aspect-ratio does not apply
        when align-items: stretch is active.
    */
}
HTML 
<section class="flex-box">
    <div class="box-1">Box - 1</div>
    <div class="box-2">Box - 2</div>
</section>
Rendered Output
Percentage (%) Values Are Not Allowed

You cannot use percentage values with the aspect-ratio property. It only accepts numeric ratios like 1 or 16 / 9. Using 100% or other percentage units will not work.

CSS 
div {
    background-color: orange;
    width: 200px;
    aspect-ratio: 100%; /* Invalid: percentages are not allowed */
}
HTML 
<div>Box Elemen</div>
Rendered Output

A video file played in a <video> element has its own built-in width-to-height ratio, also called its aspect ratio.

When using the aspect-ratio property:

  • For the <img> element, it applies to the image source itself.
  • For the <video> element, it does not apply to the video content. Instead, it affects the box of the <video> element.

Take a look at the following example:

HTML 
<video src="flower.mp4" autoplay muted playsinline loop></video>
CSS 
video {
    width: 250px;
    border: 1px solid red;
    aspect-ratio: 1/1;
}
Rendered Output

As you can see, the aspect-ratio property applies to the <video> element's box—not the actual video being played. This can result in empty space appearing within the element, which may cause styling issues.

To resolve this issue, you can use the object-fit property with a value of cover. This ensures that the video fills the entire area of the <video> box without leaving gaps.

Here's an improved version using object-fit: cover:

CSS 
video {
    width: 250px;
    border: 1px solid red;
    aspect-ratio: 1/1;
    object-fit: cover;  /* Fixes the empty space issue */
}
Rendered Output

Remember:
When using the aspect-ratio property with a <video> element, it's best to also apply object-fit: cover to prevent layout problems.

Browser compatibility

Browser compatibility for the aspect-ratio property
Property
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
aspect-ratio 88 88 89 15

Specifications

Specification for the aspect-ratio property
Specification
aspect-ratio CSS Box Sizing Module Level 4
#aspect-ratio

References