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

Interactive Demo

aspect-ratio: auto;

aspect-ratio: 1 / 1;

aspect-ratio: 16 / 9;

aspect-ratio: 0.5;

View Code

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

<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>

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

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: 31st December 2023