CSS aspect-ratio Property

Description

The aspect-ratio CSS property allows you to define the width-to-height ratio of an element. 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 aspect-ratio property is especially useful for creating responsive layouts, where elements need to be able to resize without losing their proportions. For example, you could use aspect-ratio to create a video player that maintains its 16:9 aspect ratio on all devices, or a social media post that looks good on both desktop and mobile screens.

Initial value: auto
Applies to: all elements except inline boxes and internal ruby or table boxes
Inherited: no
Computed value: as specified
Animatable: by computed value type
JavaScript syntax: object.style.aspectRatio

Syntax

aspect-ratio: auto | <ratio>

Values

autoThe element does not have a preferred aspect ratio and the browser sets it automatically based on the width and height of the element.
<ratio>The ratio is written as 16/9, here the first number is the width and the second number is the height. If any value is not specified, then it is considered equal to 1. Also, some ratios can be written in one number. For example, 2/1 can be written as 0.5, this will give the same result.

Example

HTML

<div>

    <label><input type="radio" name="aspectvalue" value="1/1">1/1</label>

    <label><input type="radio" name="aspectvalue" value="2/1">2/1</label>

    <label><input type="radio" name="aspectvalue" value="4/3">4/3</label>

    <label><input type="radio" name="aspectvalue" value="16/9" checked>16/9</label>

    <label><input type="radio" name="aspectvalue" value="21/9">21/9</label>

</div>

<div id="aspect">The aspect-ratio CSS property allows you to define the width-to-height ratio of an element. 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 aspect-ratio property is especially useful for creating responsive layouts, where elements need to be able to resize without losing their proportions. For example, you could use aspect-ratio to create a video player that maintains its 16:9 aspect ratio on all devices, or a social media post that looks good on both desktop and mobile screens.</div>

<script>

if (document.querySelector('input[name="aspectvalue"]')) {

  document.querySelectorAll('input[name="aspectvalue"]').forEach((elem) => {

    elem.addEventListener("change", function(event) {

      var item = event.target.value;

      document.getElementById("aspect").style.aspectRatio = item;

    });

  });

}

</script>

CSS

#aspect {
   border: 1px solid blue;
   background: #f2f2f2;
   width: 400px;
   aspect-ratio: 16/9;
}

Result

Browser Support

The following table will show you the current browser support for the CSS aspect-ratio property.

Desktop

88	88	89	74	15

Tablets / Mobile

88	89	63	15	15	88

Last updated by CSSPortal on: 19th September 2023

Support Us