Aspect-Ratio Property
Last updated: 2026-09-13
aspect-ratio Aspect-Ratio Property
The aspect-ratio property forces an element to keep a fixed width-to-height ratio, eliminating the need for the old padding-percentage hack. Its default value, auto, uses the element's intrinsic ratio, as with images. It is a relatively new CSS feature that greatly simplifies responsive containers for video and cards.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | all |
| Animation Type | length |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
aspect-ratio: auto || <ratio>;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | Keyword | Use the element's intrinsic aspect ratio. |
<ratio> | Type | A specified aspect ratio, such as 16/9. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| aspect-ratio | ✓ v88 | ✓ v88 | ✓ v89 | ✓ v15 | ✓ v74 |
| Supported in all major browsers | |||||
Tip： Pairing aspect-ratio with width:100% creates an adaptive proportional container, often used for embedded video and images.
❓ FAQ
QWhat's the difference between aspect-ratio and the padding-top hack?
ABoth create proportional containers, but aspect-ratio is a native property, which is more readable and easier to maintain. The padding-top hack uses a percentage padding relative to width to push out the height, typically with a ::before pseudo-element and absolutely positioned content, which is fiddly. aspect-ratio does the job in one line, so it is the recommended choice for new projects.
QDoes height still work when aspect-ratio is set?
Aaspect-ratio computes the height from an already determined width; if you also set height explicitly, that explicit height wins and overrides the ratio-computed height, so the ratio is no longer guaranteed. To keep the ratio enforced, do not set height; set only width and aspect-ratio. Also note that auto means the element's intrinsic ratio, such as an image's original dimensions.
QWhy isn't aspect-ratio working?
ACommon causes: first, the element also has a height set, and an explicit height takes priority; second, the element has no width, with width:auto and no content, leaving the ratio nothing to work from; third, the browser is too old, since the property gained stable support in Chrome 88, Firefox 89, and Safari 15. When debugging, first confirm the width and height state and give the element a width such as width:100%.
QHow do I build a responsive video container with aspect-ratio?
ASet width:100%; aspect-ratio:16/9 on the container. As the parent's width changes, the height is computed automatically to preserve the ratio, so the box scales proportionally; then absolutely position an iframe or video inside to fill it. This replaces the padding-top hack entirely. For images, preset aspect-ratio on an img container to reduce layout shift (CLS) while the image loads, which measurably improves Core Web Vitals.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
