Layout

Object Fit

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

Quick reference

Class
Properties
object-containobject-fit: contain;
object-coverobject-fit: cover;
object-fillobject-fit: fill;
object-noneobject-fit: none;
object-scale-downobject-fit: scale-down;

Basic usage

Resizing to cover a container

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

Object Fit - 图1

  1. <div class="bg-indigo-300 ...">
  2. <img class="object-cover h-48 w-96 ...">
  3. </div>

Containing an element

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

Object Fit - 图2

  1. <div class="bg-purple-300 ...">
  2. <img class="object-contain h-48 w-96 ...">
  3. </div>

Stretching to fit a container

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

Object Fit - 图3

  1. <div class="bg-sky-300 ...">
  2. <img class="object-fill h-48 w-96 ...">
  3. </div>

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.

Object Fit - 图4

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

Using an element’s original size

Display an element’s content at its original size ignoring the container size using .object-none.

Object Fit - 图5

  1. <div class="bg-yellow-300">
  2. <img class="object-none h-48 w-96 ...">
  3. </div>

Applying conditionally

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.

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

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 object-scale-down utility at only medium screen sizes and above.

  1. <img class="object-contain md:object-scale-down">

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.