A Practical Guide to Aspect Ratio in CSS
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: • 5 Default VS Code Settings You Should... 🔥
🔗 Codepen demo
https://codepen.io/ZoranJambor/pen/Vw...
📚 Resources
CSS Property: https://developer.mozilla.org/en-US/d...
Media Query: https://developer.mozilla.org/en-US/d...
📖 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:
💌 https://css-weekly.com/
Keep up-to-date with CSS Weekly:
👉 Twitter: / cssweekly
👉 Instagram: / cssweekly
👉 Facebook: / cssweekly
Keep up to date with what I'm up to:
🔗 Blog: https://zoranjambor.com
👉 Twitter: / zoranjambor
👉 LinkedIn: / zoranjambor
Zoran Jambor
#css
Watch video A Practical Guide to Aspect Ratio in CSS online without registration, duration hours minute second in high quality. This video was added by user CSS Weekly 27 April 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 5,869 once and liked it 218 people.