Utilities for controlling how a replaced element's content should be resized.
<div class="bg-rose-300 ...">
<img class="object-contain h-48 w-full ...">
</div>
<div class="bg-indigo-300 ...">
<img class="object-cover h-48 w-full ...">
</div>
<div class="bg-light-blue-300 ...">
<img class="object-fill h-48 w-full ...">
</div>
Display an element's content at its original size ignoring the container size using .object-none
.
<div class="bg-yellow-300">
<img class="object-none h-48 w-full ...">
</div>
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-green-300">
<img class="object-scale-down h-48 w-full ...">
</div>
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.
<div>
<img class="object-contain md:object-scale-down ..." src="...">
</div>
For more information about Tailwind's responsive design features, check out the Responsive Design documentation.
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: {
extend: {
// ...
+ objectFit: ['hover', 'focus'],
}
}
}
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,
}
}