Tailwind CSS
/Advanced
Aspect Ratio
Definition
Utilities for controlling the aspect ratio of an element, ensuring it maintains a specific proportion (like 16:9 or 1:1) regardless of its width.
Explain Like I'm New
A TV screen is always a rectangle (16:9). A profile picture is always a square (1:1). If you define `aspect-video` on a video player, it will ALWAYS perfectly calculate its own height to match its width, no matter how much you resize your browser window.
Real World Example
Embedding a YouTube iframe. Without aspect ratio, iframes look horrible on mobile phones. With `aspect-video w-full`, the iframe perfectly scales to look like a mobile video player.
Common Use Cases
- •Videos
- •Image grids
- •Profile pictures
Interactive Example
Interview Questions
basic
- What Tailwind class forces an element to be a perfect square?
intermediate
- Before `aspect-ratio` was added natively to CSS, what complex 'hack' did developers use to achieve responsive videos?