Responsive Images and Aspect Ratios

Responsive images need two things: fluid width and controlled aspect ratio. Without aspect ratio control, images cause layout shift as they load.

Basic responsive image

<img src="photo.jpg" alt="..." class="w-full h-auto rounded-lg" />

Aspect ratio and object-fit

<div class="aspect-video rounded-xl overflow-hidden">
  <img src="thumb.jpg" alt="..." class="w-full h-full object-cover" />
</div>

<div class="aspect-square w-16 rounded-full overflow-hidden">
  <img src="avatar.jpg" alt="..." class="w-full h-full object-cover" />
</div>

Object position

<div class="aspect-[4/3] overflow-hidden">
  <img src="team.jpg" alt="..." class="w-full h-full object-cover object-top" />
</div>

Custom aspect ratios

<div class="aspect-[16/9]">...</div>
<div class="aspect-[3/2]">...</div>

aspect-video = 16/9. aspect-square = 1/1. Both set the CSS aspect-ratio property. Combine with overflow-hidden on the container to clip overflow from object-cover.