Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Object Fit

Quiz

Tailwind CSS Object-Fit is a utility class that provides an effective way of how an image or video resizes itself to fit within its container.

Tailwind CSS Object Fit Classes

The following is the list of Tailwind CSS Object-Fit Classes that provides an effective way of adjusting an image or video within its container.

Class	CSS 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;

Functionality of Tailwind CSS Object Fit Classes

object-contain: This class replaces the CSS object-fit: contain; property. This class resizes an image or video while maintaining its aspect ratio in order to fit it within its container.
object-cover: This class replaces CSS object-fit: cover; property. This class resizes an image or video while maintaining its aspect ratio in order to fill its container completely, potentially by cropping the content.
object-fill: This class replaces the CSS object-fit: fill; property. This class stretches an image or video to fill its container completely while ignoring the aspect ratio.
object-none: This class replaces CSS object-fit: none; property. This class displays content at its original size, ignoring container size.
object-scale-down: This class replaces the CSS object-fit: scale-down; property. This class resizes images or videos to the smallest possible size while maintaining there aspect ratio.

Tailwind CSS Object Fit Class Examples

The following examples will illustrate the Tailwind CSS Object Fit class utility.

Containing an Element

The below example illustrates the use of the Tailwind CSS Object Contain Class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="font-bold text-xl mb-3">
        Tailwind CSS Object Contain Class
    </h2>
    <div class="h-48 w-48 border 
                border-gray-400">
        <img src="/html/images/html.jpg" 
             class="object-contain h-full w-full" />
    </div>

</body>
</html>

Resizing to Cover a Container

The below example is illustrating the use of Tailwind CSS Object Cover Class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="font-bold text-xl mb-3">
        Tailwind CSS Object Contain Class
    </h2>
    <div class="h-48 w-48 border 
                border-gray-400">
        <img src="/html/images/html.jpg" 
             class="object-cover h-full w-full" />
    </div>

</body>
</html>

Stretching to Fit a Container

The below example is illustrating the use of Tailwind CSS Object Fill Class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="font-bold text-xl mb-3">
        Tailwind CSS Object Contain Class
    </h2>
    <div class="h-48 w-48 border 
                border-gray-400">
        <img src="/html/images/html.jpg" 
             class="object-fill h-full w-full" />
    </div>

</body>
</html>

Using an Elements Original Size

The below example is illustrating the use of Tailwind CSS Object None Class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="font-bold text-xl mb-3">
        Tailwind CSS Object Contain Class
    </h2>
    <div class="h-48 w-48 border 
                border-gray-400">
        <img src="/html/images/html.jpg" 
             class="object-none h-full w-full" />
    </div>

</body>
</html>

Scaling Down if Too Large

The below example is illustrating the use of Tailwind CSS Object Object Scale Down Class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="font-bold text-xl mb-3">
        Tailwind CSS Object Contain Class
    </h2>
    <div class="h-48 w-48 border 
                border-gray-400">
        <img src="/html/images/html.jpg" 
             class="object-scale-down
                    h-full w-full" />
    </div>

</body>
</html>

Print Page