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.
Applying 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:
<img src="image.jpg" class="object-cover" />Preview
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.
<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
| Class | 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; |
Windframe Tailwind blocks
Build modern projects using Bootstrap 5 and Contrast
Trying to create components and pages for a web app or website from
scratch while maintaining a modern User interface can be very tedious.
This is why we created Contrast, to help drastically reduce the amount of time we spend doing that.
so we can focus on building some other aspects of the project.
Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants.
Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for
building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.
