Uploaded April 2022 | Updated September 2026, 2 hours ago

---

A practical, hands-on guide to using aspect ratio in CSS.

With CSS aspect-ratio property, supported in all modern browsers, you will no longer need to resort to padding hack to maintain the proportional dimensions of an element.

🔥 VS Code Tips: youtu.be/WQ9jhxy7Mkk 🔥

🔗 Codepen demo
codepen.io/ZoranJambor/pen/VwyJvoe/24fe7c744d6f8b959f1bb5c170d4a5b7

📚 Resources
CSS Property: developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
Media Query: developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio

📖 Chapters
00:00 Intro
00:22 How aspect-ratio property works
01:57 How padding hack works
03:04 An example with the aspect-ratio property
04:01 Using "auto" value with aspect-ratio property
05:53 Setting aspect ratio on an iframe
07:34 What exactly preferred aspect ratio means
08:21 How aspect-radio media query works
09:44 Conclusion

Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com

Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly

Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor

- Zoran Jambor
#css