Tailwind CSS Object Fit

The object-{fit} utility class in Tailwind CSS allows you to control how an image or video content fits within its container. With Tailwind's object-{fit} class, you can easily adjust the scaling and positioning of media elements to achieve the desired visual effect.

How to apply Tailwind Object Fit

To apply the object fit behavior to an element, you can use the object-{fit} utility class, where {fit} represents the desired fitting mode. The available fitting modes are:

• object-contain: Scale the content proportionally to fit within the container while preserving its aspect ratio.
• object-cover: Scale the content proportionally to completely cover the container, potentially cropping parts of the content.
• object-fill: Stretch the content to fill the container, disregarding its aspect ratio and potentially distorting the content.
• object-none: Display the content at its original size, ignoring the container's dimensions and aspect ratio.
• object-scale-down: Scale the content down if it is larger than the container, maintaining its aspect ratio. Here's an example:

1<img src="image.jpg" class="object-cover" />

Responsive Object Fit

Tailwind CSS allows you to apply object fit classes responsively at different breakpoints. To use responsive object fit classes, you can append the breakpoint prefix to the utility class. For example, md:object-fill sets the object fit behavior to object-fill starting from the medium breakpoint and above.

1<img src="image.jpg" class="object-contain md:object-fill" />

In the above example, the object fit behavior of the <img> element is set to object-contain by default, but starting from the medium breakpoint and above, it changes to object-fill.

Tailwind Object Fit Class Table

🔍 Want to Learn More?

• Tailwind Object Position

Windframe Tailwind blocks