Tailwind CSS provides utility classes for controlling how the content of a replaced element, such as an image or video, should be resized to fit its container. These utilities correspond to the CSS object-fit property and allow you to control whether the content should be contained within the container, cover the container, stretch to fill it, remain at its original size, or scale down when necessary.
Object fit Classes
1. object-contain Class
The object-contain utility resizes an element's content to stay contained within its container while preserving the content's aspect ratio.
Syntax:
<element class="object-contain">...</element>Example: This example demonstrates the use of the .object-contain class.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Object Contain</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="bg-gray-100 p-8">
<h1 class="mb-6 text-3xl font-bold">
Tailwind CSS object-contain
</h1>
<div class="h-48 w-96 bg-green-300">
<img
class="h-full w-full object-contain"
src="https://images.unsplash.com/photo-1500534623283-312aade485b7"
alt="Landscape"
>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
2. object-cover Class
The object-cover utility resizes an element's content to cover its container while preserving its aspect ratio. If the aspect ratio of the content differs from the container, some parts of the content may be clipped.
Syntax:
<element class="object-cover">...</element>Example: This example demonstrates the use of the .object-cover class.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Object Cover</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="bg-gray-100 p-8">
<h1 class="mb-6 text-3xl font-bold">
Tailwind CSS object-cover
</h1>
<div class="h-48 w-96 bg-green-300">
<img
class="h-full w-full object-cover"
src="https://images.unsplash.com/photo-1500534623283-312aade485b7"
alt="Landscape"
>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
3. object-fill Class
This class replaced image is stretched to fit the content box. The replaced image will completely fill the box needless of its aspect ratio. Stretch an element's content to fit its container using the class.
Syntax:
<element class="object-fill">...</element>Example: This example demonstrates the use of the .object-fill class.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Object Fill</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="bg-gray-100 p-8">
<h1 class="mb-6 text-3xl font-bold">
Tailwind CSS object-fill
</h1>
<div class="h-48 w-96 bg-green-300">
<img
class="h-full w-full object-fill"
src="https://images.unsplash.com/photo-1500534623283-312aade485b7"
alt="Landscape"
>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
4. object-none Class
In this class, the replaced image will ignore the aspect ratio of the original image. Hence, it is not resized. The class displays an element's content at its original size ignoring the container size.
Syntax:
<element class="object-none">...</element>Example: This example demonstrates the use of the .object-none class.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Object None</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="bg-gray-100 p-8">
<h1 class="mb-6 text-3xl font-bold">
Tailwind CSS object-none
</h1>
<div class="h-48 w-96 overflow-hidden bg-green-300">
<img
class="h-full w-full object-none"
src="https://images.unsplash.com/photo-1500534623283-312aade485b7"
alt="Landscape"
>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
5. object-scale-down
This class replaced image is resized as if none or contain were specified and results in the smallest object size. The class displays an element's content at its original size but scale it down to fit its container.
Syntax:
<element class="object-scale-down">...</element>Example: This example demonstrates the use of the .object-scale-down class.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Object Scale Down</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="bg-gray-100 p-8">
<h1 class="mb-6 text-3xl font-bold">
Tailwind CSS object-scale-down
</h1>
<div class="h-48 w-96 bg-green-300">
<img
class="h-full w-full object-scale-down"
src="https://images.unsplash.com/photo-1500534623283-312aade485b7"
alt="Landscape"
>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->