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 | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
88 | 88 | 89 | 74 | 15 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
88 | 89 | 63 | 15 | 15 | 88 |
Last updated by CSSPortal on: 31st December 2023