Media

Apply .img to responsive images or video and combine it with aspect-ratio and object-fit utilities. Provide intrinsic dimensions so the browser can reserve layout space.

Show codeHide code

<img
  class="img"
  src="/images/decorative/ex60-road.avif"
  width="1200"
  height="675"
  alt="Volvo EX60 driving on a coastal road"
/>

Aspect ratio

Aspect-ratio utilities lock the proportional relationship between width and height. Combined with a width attribute, the height is computed automatically, preventing layout shift as the image loads.

Square: aspect-1/1. Portrait ratios: aspect-4/5, aspect-2/3, aspect-9/16. Landscape ratios: aspect-4/3, aspect-3/2, aspect-16/9, aspect-21/9.

Images still need to be cropped at source to one of the supported ratios. The CSS only enforces the box, it doesn’t reframe the photo.

Responsive ratios

Use breakpoint prefixes to change the ratio per viewport. A common pattern for hero art that needs a portrait crop on mobile and a cinematic crop on desktop.

<picture>
  <source
    srcset="hero-1200x675.avif"
    media="(min-width: 1024px)"
    width="1200"
  />
  <img
    class="img aspect-4/5 lg:aspect-16/9"
    src="hero-400x500.avif"
    width="400"
    alt="…"
  />
</picture>

On non-media elements

aspect-* works on any block element, not just <img> and <video>. Useful for placeholders, skeleton boxes, or CSS background-image tiles where you want a known shape before content loads.

<div class="aspect-16/9 w-full bg-secondary"></div>

Object fit

When an image or video has an explicit width and height (or fills a sized container), object-* controls how the source fits inside that box.

• object-cover: scale to fill the box, cropping any overflow. Default for .img. Use for decorative and hero imagery.
• object-contain: scale to fit entirely inside the box, letterboxing if the ratios differ. Use when no part of the image may be cropped (logos, diagrams).
• object-fill: stretch to fill the box, distorting the image. Avoid for photography; it’s rarely the right choice.

object-position is not exposed as a utility. The default 50% 50% (center) is almost always correct. If you need a different focal point, set it in component CSS.

Accessibility

• Give informative images concise alt text that communicates their purpose in context.
• Use alt="" when an image is decorative and nearby content already communicates the same information.
• Include intrinsic width and height so loading media does not unexpectedly shift the surrounding content.