Object Fit

Utilities for controlling how a replaced element’s content should be resized.

Resize an element’s content to cover its container using .

Containing an element

Resize an element’s content to stay contained within its container using object-contain.

<div class="bg-purple-300 ...">
</div>

Stretch an element’s content to fit its container using .

Scaling down if too large

Display an element’s content at its original size but scale it down to fit its container if necessary using object-scale-down.

<div class="bg-cyan-300">
  <img class="object-scale-down h-48 w-96 ...">
</div>

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:object-scale-down to only apply the object-scale-down utility on hover.

<img class="object-contain hover:object-scale-down">

For a complete list of all available state modifiers, check out the documentation.

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:object-scale-down to apply the utility at only medium screen sizes and above.