Responsive Media That Never Jumps
Aspect Ratio & Object Fit
Lock element ratios and control how replaced content fills its box to build media that never causes layout shift.
What you'll learn
- Use aspect-video, aspect-square, and arbitrary ratios
- Use object-cover and contain with object-position
- Build a responsive image or video frame
Media that resizes badly causes the page to jump as it loads — cumulative layout shift. Aspect-ratio and object-fit utilities fix both problems together.
Locking the Ratio
aspect-* reserves the box’s shape before the media loads, so nothing shifts:
<!-- 16:9 video embed, always -->
<iframe class="aspect-video w-full rounded-lg" src="..."></iframe>
<!-- Perfect square thumbnail -->
<img class="aspect-square w-32 object-cover rounded-lg" src="/thumb.jpg" alt="" />
<!-- Any custom ratio -->
<div class="aspect-[4/3] w-full bg-gray-100"></div>Because the browser knows the box will be, say, 16:9 from the first paint, the space is held and content below it never gets shoved down.
Filling Without Distortion
When an image’s natural ratio differs from its box, object-fit decides what to do:
object-cover— fill the box, cropping overflow (no distortion).object-contain— fit entirely inside, letterboxing the gaps.object-fill— stretch to fill (distorts; rarely what you want).
object-position controls which part survives a crop:
<img class="size-full object-cover object-top" src="/portrait.jpg" alt="" />object-top keeps faces visible when a tall photo is cropped into a short box.
A Responsive Media Frame
Combine them for a frame that scales fluidly and never shifts:
<figure class="aspect-video w-full overflow-hidden rounded-xl">
<img class="size-full object-cover object-center" src="/cover.jpg" alt="" />
</figure>The frame holds a fixed 16:9 shape at any width, size-full makes the image fill it, object-cover prevents distortion, and overflow-hidden keeps the corners rounded. The result is media that is responsive and layout-shift free.