Aspect Ratio

aspect-ratio Property

The aspect-ratio property maintains a fixed width/height ratio as elements resize, replacing the old padding-bottom hack.

Example

.video { width: 100%; aspect-ratio: 16 / 9; }
.square-thumb { width: 80px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.card-img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }

CSS

Full Editor

Pro Tip

aspect-ratio prevents layout shift (CLS) by reserving space before content loads.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned