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

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
Edge Chrome Firefox Opera Safari
8888897415
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
888963151588

Last updated by CSSPortal on: 31st December 2023