aspect-ratio
The aspect-ratio property defines a preferred width-to-height ratio for an element. It is useful for media cards, video containers, placeholders, and responsive components where stable geometry is important.
Aspect Ratio
Video Card Ratio
.video {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}💡 The element maintains a 16:9 ratio as its width changes.
Key Takeaways
aspect-ratiocreates predictable proportions.- It can reduce layout shifts when media dimensions are known.
Knowledge Check
What does `aspect-ratio: 16 / 9` describe?