imagesbeginner

Aspect Ratio Image

Image container maintaining consistent aspect ratio across breakpoints.

Preview

Feature image

Tailwind Classes

aspect-video overflow-hidden rounded-lg [&>img]:w-full [&>img]:h-full [&>img]:object-cover

CSS Code

.aspect-container {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.5rem;
}
.aspect-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

HTML Example

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

Use Cases

Video thumbnailsHero imagesGallery itemsCard images

Browser Support

All modern browsers

#aspect-ratio#image#responsive#layout