Aspect Ratio
ELI5 — The Vibe Check
The aspect-ratio property tells an element to keep its proportions, like a photo that stays rectangular no matter how you resize it. No more padding-bottom hacks to make responsive video containers. We suffered for years, and now it's one line of CSS.
Real Talk
The CSS aspect-ratio property sets a preferred width-to-height ratio for an element, replacing the legacy padding-top percentage hack. It works with replaced and non-replaced elements and respects explicit width/height constraints. Widely supported in all modern browsers.
Show Me The Code
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
.avatar {
aspect-ratio: 1;
}
When You'll Hear This
"Use aspect-ratio: 16/9 instead of that padding-bottom: 56.25% monstrosity" / "The image grid uses aspect-ratio: 1 for perfect squares"
Related Terms
CSS Clamp
clamp() is CSS's way of saying 'be this size, but never smaller than this and never bigger than that.
Layouts (Frontend)
Layouts are like the floor plan of your website.
Responsive vs Adaptive
Responsive design flows like water — it adjusts smoothly to any screen size. Adaptive design has fixed breakpoints — it snaps between pre-designed layouts.