Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
aspect-ratio property maintains a consistent width-to-height ratio. No more padding-bottom hacks for videos and images!.video {
position: relative;
padding-bottom: 56.25%;
/* 16:9 = 9/16 = 56.25% */
}.video {
aspect-ratio: 16 / 9;
/* That's it! */
}16 / 9Videos, YouTube, modern TV
4 / 3Old TV, presentations
1 / 1Instagram, profile pictures
21 / 9Cinema, gaming
3 / 2DSLR cameras
9 / 16Stories, Reels, TikTok
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1>📐 Aspect Ratio Demo</h1>
<div class="grid">
<div class="ratio-box ratio-16-9">
<div class="ratio-content">
<div class="ratio-label">16:9</div>
<div class="ratio-name">Widescreen</div>
</div>
</div>
<div class="ratio-box ratio-4-3">
<div class="ratio-content">
<div class="ratio-label">4:3</div>
<div class="ratio-name">Standard</div>
</div>
</div>
<div class="ratio-box ratio-1-1">
<div class="ratio-content">
<div class="ratio-label">1:1</div>
<div class="ratio-name">Square</div>
</div>
</div>
<div class="ratio-box ratio-21-9">
<div class="ratio-content">
<div class="ratio-label">21:9</div>
<div class="ratio-name">Ultrawide</div>
</div>
</div>
<div class="ratio-box ratio-3-2">
<div class="ratio-content">
<div class="ratio-label">3:2</div>
<div class="ratio-name">Classic Photo</div>
</div>
</div>
<div class="ratio-box ratio-9-16">
<div class="ratio-content">
<div class="ratio-label">9:16</div>
<div class="ratio-name">Vertical (Stories)</div>
</div>
</div>
</div>
</div>
</body>
</html>Loading preview...
YouTube, Vimeo, responsive videos
.video-wrapper {
aspect-ratio: 16 / 9;
}Square avatars, thumbnails
.avatar {
aspect-ratio: 1;
border-radius: 50%;
}E-commerce product images
.product-image {
aspect-ratio: 3 / 4;
object-fit: cover;
}Instagram/Snapchat stories
.story {
aspect-ratio: 9 / 16;
max-height: 100vh;
}img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover; /* Fills the space */
}
iframe {
aspect-ratio: 16 / 9;
width: 100%;
border: none;
}aspect-ratio with width: 100% for fully responsive media that maintains proportions!1 / 1 (square)