Tailwind CSS Object Fit

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

Syntax

The syntax for using Object Fit utility in Tailwind CSS is:

<div class="object-{fit|none}"></div>

where object-{fit|none} can be any of the following values:

• object-contain
• object-cover
• object-fill
• object-none
• object-scale-down

Examples

<!-- object-fit: contain -->
<div class="object-contain">...</div>

<!-- object-fit: cover -->
<div class="object-cover">...</div>

<!-- object-fit: fill -->
<div class="object-fill">...</div>

<!-- object-fit: none -->
<div class="object-none">...</div>

<!-- object-fit: scale-down -->
<div class="object-scale-down">...</div>

Output

The above code snippets will result in the following output:

• object-contain: scales the content to fit the container while preserving its aspect ratio
• object-cover: scales the content to fill the container while preserving its aspect ratio, cropping the excess
• object-fill: stretches the content to fill the container, deforming the aspect ratio
• object-none: places the content in the container as-is, ignoring any aspect ratio
• object-scale-down: scales the content to fit the container while preserving its aspect ratio if it's smaller than the container, otherwise scales it down to fit

Explanation

The Tailwind CSS Object Fit utility allows you to set how the content of a container should fit within its bounds. By default, the content will overflow the container if it's larger than it. The Object Fit utility provides several options to control how the content is displayed.

By using the object-{fit|none} utility, you can set the object-fit property to any of the predefined values, which control the resizing behavior. The values of the object-fit property are just ways to determine what to do with the content when its aspect ratio doesn't match the aspect ratio of the container.

Use

The Object Fit utility is useful for creating responsive images and videos. It allows you to display media within a container at a specific aspect ratio.

For example, if you want to display a landscape image within a square container, you can set the object-fit property to object-cover and adjust the container's dimensions accordingly. This will result in the image being resized to fill the container, with the edges being cropped as necessary.

<div class="w-64 h-64">
  <img src="landscape.jpg" alt="Landscape Image" class="w-full h-full object-cover">
</div>

Important Points

• Object Fit utility is used to control how the content of a container should fit within its bounds
• The values for this utility are object-contain, object-cover, object-fill, object-none, and object-scale-down
• It is useful for creating responsive images and videos

Summary

In this tutorial, we covered how to use the Object Fit utility in Tailwind CSS. The Object Fit utility is helpful when creating responsive images and videos. It allows you to display media within a container at a specific aspect ratio, and provides several options for controlling how the content is resized to fit the container. The predefined values for Object Fit in Tailwind CSS are object-contain, object-cover, object-fill, object-none, and object-scale-down.