Aspect Ratio

Sets the preferred aspect ratio for an element, which will be maintained as the element resizes. This is extremely useful for responsive design, particularly with images, videos, and other media to prevent layout shifts during page load. In Tailwind v4, the aspect-ratio utility has enhanced browser support and performance.

Layout1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="aspect-square bg-blue-200 w-full max-w-md">
  This div will always be perfectly square.
</div>

Examples

Square aspect ratio (1:1)

<div class="aspect-square bg-blue-200 w-full max-w-md">
  This div will always be perfectly square.
</div>

Edit in playground

Video aspect ratio (16:9), perfect for embedding responsive videos

<div class="aspect-video bg-green-200 w-full max-w-xl">
  This div maintains a 16:9 aspect ratio like a video.
</div>

Edit in playground

Custom aspect ratio (4:3) with an image that maintains proportions

<!-- Image with maintained aspect ratio -->
<div class="aspect-[4/3] bg-gray-200 w-full max-w-lg overflow-hidden">
  <img src="example.jpg" alt="Example" class="w-full h-full object-cover" />
</div>

Edit in playground

Real-world example of a card with responsive image maintaining aspect ratio

<!-- Responsive card with image maintaining aspect ratio -->
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg">
  <div class="aspect-[3/2] bg-gray-100">
    <img class="w-full h-full object-cover" src="example.jpg" alt="Card image">
  </div>
  <div class="p-4">
    <h3 class="font-bold text-xl mb-2">Card Title</h3>
    <p class="text-gray-700">The image above maintains a 3:2 aspect ratio regardless of card width.</p>
  </div>
</div>

Edit in playground