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 State 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,
}
}