Media
Aspect-ratio and object-fit/object-position utilities for images, video, and iframes - keep media proportioned without wrapper hacks.
Aspect ratio
.aspect-* (aliased as .as-*) sets the aspect-ratio property directly on the element.
Preview
1 / 1
16 / 9
<div class="aspect-square" style="width:100px;"></div>
<iframe class="aspect-video w-full" src="..."></iframe>| Class | aspect-ratio |
|---|---|
.aspect-auto / .as-auto | auto |
.aspect-square / .as-square | 1 / 1 |
.aspect-video / .as-video | 16 / 9 |
Object fit
.object-{value} controls how an image or video is resized to fit its box - identical vocabulary to the CSS object-fit property.
<img class="object-cover aspect-video w-full" src="banner.jpg" alt="">| Class | object-fit |
|---|---|
.object-cover | cover |
.object-contain | contain |
.object-fill | fill |
.object-scale-down | scale-down |
.object-none | none |
Object position
Combine with .object-{side} to control which part of the media stays visible when it's cropped.
<img class="object-cover object-top aspect-square" src="portrait.jpg" alt="">| Class | object-position |
|---|---|
.object-center | center |
.object-top / .object-bottom | top / bottom |
.object-left / .object-right | left / right |
.object-top-left | top left |
.object-top-right | top right |
.object-bottom-left | bottom left |
.object-bottom-right | bottom right |
Pair with sizing.object-fitonly has an effect once the element has an explicit box - combine with.aspect-*,.w-*/.h-*, from Sizing.