midCSS
What is the CSS aspect-ratio property?
Updated Apr 28, 2026
Short answer
It allows you to explicitly define the proportional relationship between an element's width and height.
Deep explanation
Historically, achieving responsive aspect ratios required the 'padding-bottom hack' (using percentage padding). The aspect-ratio property natively handles this, scaling the element perfectly as the container width changes without complex markup or math.
Real-world example
Embedding a YouTube iframe that maintains a perfect widescreen ratio on both mobile and 4K desktop monitors.
Common mistakes
- Applying `aspect-ratio` while simultaneously hardcoding both `width` and `height`, which overrides and breaks the ratio constraint.
Follow-up questions
- What happens if content overflows the aspect-ratio height?