CSS - How to achieve aspect ratio boxes
Use padding with top/bottom padding % to maintain dimensions. Padding % relative to width allows height to match any intrinsic ratio like 16:9 without hard values.
🧑💻CSS Code:
.ratio-box {
height: 0;
padding-top: 50%;
background: url(img.jpg);
background-size: cover;
}
/* 16:9 ratio */
.ratio-box-wide {
padding-top: 56.25%;
}
🚀 Subscribe to my channels for more exciting content:
🔵 YouTube: / @devtoolsmix
🔴 TikTok: https://www.tiktok.com/@.devtools
📸 Instagram: https://www.instagram.com/web.devtools/
Don't miss out on new videos and fun moments! Subscribe now! 🌟
#css #layout #ratio