Object Fit In Tailwind CSS
Tailwind Object Fit is an easy to use feature that allows you to easily and efficiently control the size and position of images and videos on your websites.
In this article, we’ll take a closer look at Tailwind Object Fit and how you can use it to enhance the design and functionality of your website.
What is Tailwind Object Fit?
Tailwind Object Fit is a CSS property that controls how an image is resized and displayed within its container.
It is used to ensure that images are displayed correctly and responsively across different screen sizes and devices.
Tailwind object fit property is used to define how the image should fit into its container, and the object-position property is used to define where the image should be positioned within its container.
Tailwind Object Fit Classes
| Classes | Overview |
| object-contain | The content of the element is scaled in such a way that it maintains its aspect ratio while also fitting within the content box of the container. |
| object-cover | This class scales the element’s content to cover the entire container’s content box while maintaining the aspect ratio. |
| object-fill | The object-fill class stretches the element’s content to fill the entire container’s content box, which may cause the content to lose its aspect ratio. |
| object-none | This class displays the element’s content at its original size, regardless of the size of the container |
| object-scale-down | In this case, the element’s content is scaled to fit within the container’s content box while maintaining its aspect ratio. |
How to use Tailwind Object Fit?
Using Tailwind Object Fit is easy, and it requires just a few lines of code.
First, you need to define the container for your image and add the appropriate Tailwind classes.
You can use the w- and h- classes to set the width and height of the container, and the overflow-hidden class to ensure that the image does not overflow the container.
Next, you need to add the object-fit and object-position classes to the image element.
The object-fit class defines how the image should fit into its container, and the object-position class defines where the image should be positioned within its container.
Scroll down to see all classes use case with example.
Object-Contain
Using this class, the element’s content is scaled to maintain its aspect ratio while fitting within the container’s content box.
This means that the entire content of the element is visible, but there may be some empty space in the container if the aspect ratio of the element does not match that of the container.
Syntax
<element class="object-contain">...</element>
To illustrate the object-contain class, let’s consider the example below:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center font-medium">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Object Fit class in Tailwind CSS</p>
<p class="font-medium my-2 text-gray-500">Using object-contain class</p>
<div class="bg-gray-300 w-full h-full rounded">
<img class="object-contain h-48 w-full" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind1.webp">
</div>
</body>
</html>
Object Cover
The object-cover class in Tailwind scales the element’s content to cover the entire container’s content box while preserving its aspect ratio.
As a result, some parts of the content may be cropped if the element’s aspect ratio does not match that of the container.
Syntax:
<element class="object-cover">...</element>
In this example our goal is to implement the object-cover class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center font-medium">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Object Fit class in Tailwind CSS</p>
<p class="font-medium my-2 text-gray-500">Using object-cover class</p>
<div class="bg-gray-300 w-full h-full rounded">
<img class="object-cover h-48 w-full" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind1.webp">
</div>
</body>
</html>
Object Fill
The object-fill class in Tailwind stretches the content of an element to completely fill the container’s content box.
This can lead to the content losing its original aspect ratio, as it is forced to fit the container.
Syntax
<element class="object-fill">...</element>
This example showcases the implementation of the object-fill class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center font-medium">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Object Fit class in Tailwind CSS</p>
<p class="font-medium my-2 text-gray-500">Using object-fill class</p>
<div class="bg-gray-300 w-full h-full rounded">
<img class="object-fill h-48 w-full" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind1.webp">
</div>
</body>
</html>
Object None
The object-none class in Tailwind displays the element’s content at its original size, irrespective of the container’s size.
This can cause the content to overflow or underflow the container, depending on the size of the content and the container.
Syntax
<element class="object-none">...</element>
The following example demonstrates the object-none class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center font-medium">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Object Fit class in Tailwind CSS</p>
<p class="font-medium my-2 text-gray-500">Using object-none class</p>
<div class="bg-gray-300 w-full h-full rounded">
<img class="object-none h-48 w-full" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind1.webp">
</div>
</body>
</html>
Object Scale-down
This class scales down the element’s content to fit within the container’s content box while preserving its aspect ratio.
If the content is larger than the container, it will be reduced in size to fit within the container. However, if the content is smaller than the container, it will be displayed at its original size without being stretched.
Syntax
<element class="object-scale-down">...</element>
This example makes it simple to understand the concept of object-scale-down:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center font-medium">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Object Fit class in Tailwind CSS</p>
<p class="font-medium my-2 text-gray-500">Using object-scale-down class</p>
<div class="bg-gray-300 w-full h-full rounded">
<img class="object-scale-down h-48 w-full" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind1.webp">
</div>
</body>
</html>
Tailwind Object Fit is compatible with all major web browsers, including
Chrome, Firefox, Safari, and Edge.
This ensures that your website is accessible and viewable by the widest possible audience.
