Object Fit

Contain

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

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

<div class="bg-gray-400">
  <img class="object-cover h-48 w-full ...">
</div>

Fill

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

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

<div class="bg-gray-400">
  <img class="object-none h-48 w-full ...">
</div>

Scale Down

To control how a replaced element’s content should be resized only at a specific breakpoint, add a {screen}: prefix to any existing object fit utility. For example, adding the class md:object-scale-down to an element would apply the object-scale-down utility at medium screen sizes and above.

For more information about Tailwind’s responsive design features, check out the documentation.

all

sm

lg

xl

<div class="bg-gray-400">
</div>

Customizing

By default, only responsive variants are generated for object-fit utilities.

You can control which variants are generated for the object-fit utilities by modifying the objectFit property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

Disabling

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     objectFit: false,
    }
  }

← Clear