Images

Image utilities control how images and background images fill their containers. The base layer already makes images responsive by default (max-width: 100%; height: auto;), so these utilities are for when you need more control.

Object Fit

Control how an <img> or <video> fills its container when you've set explicit dimensions:

.object-cover

Fills container, crops if needed. Best for thumbnails and hero images.

.object-contain

Fits entirely within container. Best for logos and product images.

.object-fill

Stretches to fill. Distorts aspect ratio.

Also available: .object-none (natural size), .object-scale-down (like contain, but never scales up)

Object Position

When using .object-cover, control which part of the image remains visible:

.object-top

.object-center

.object-bottom

Also available: .object-left, .object-right, and corner positions like .object-top-left

Background Images

For background images set via CSS or inline styles, use these utilities to control sizing, position, and repeat:

Common pattern for a hero background:

<div class="bg-cover bg-center bg-no-repeat" style="background-image: url('...')">
  ...
</div>