Tailwind CSS - Object Fit

---

---

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.

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

    



    

        Tailwind CSS Object Contain Class
    
    

        
    

Resizing to Cover a Container

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

Example

    



    

        Tailwind CSS Object Contain Class
    
    

        
    

Stretching to Fit a Container

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

Example

    



    

        Tailwind CSS Object Contain Class
    
    

        
    

Using an Elements Original Size

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

Example

    



    

        Tailwind CSS Object Contain Class
    
    

        
    

Scaling Down if Too Large

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

Example

    



    

        Tailwind CSS Object Contain Class