Object Fit

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

Class reference

Class Properties
.object-contain object-fit: contain;
.object-cover object-fit: cover;
.object-fill object-fit: fill;
.object-none object-fit: none;
.object-scale-down object-fit: scale-down;

Contain

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

.object-contain

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

Cover

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

.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.

.object-fill

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

None

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

.object-none

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

Scale Down

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

.object-scale-down

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

Responsive

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 Responsive Design documentation.

Customizing

Responsive and pseudo-class variants

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:

// tailwind.config.js
module.exports = {
variants: {
    // ...
-   objectFit: ['responsive'],
+   objectFit: ['responsive', 'hover', 'focus'],
}
}

Disabling

If you don't plan to use the object-fit utilities in your project, you can disable them entirely by setting the objectFit property to false in the corePlugins section of your config file:

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