Object position

The object-position property in Tailwind CSS is used to specify the position of an image or video within its container. It accepts the values like:

• top: The image or video is positioned at the top of its container.
• bottom: The image or video is positioned at the bottom of its container.
• left: The image or video is positioned at the left of its container.
• right: The image or video is positioned at the right of its container.
• center: The image or video is centered within its container.

Object position property is used together with Object fit, which we learned in the previous lesson. This is what it can look in HTML:

        
            


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

    
        
    

This code will position the image at the left of its container.

Using the example from the previous lesson, it will look like this:

Default position

.object-left

As you can see the image has been moved to its left edge.

You can also combine these values and create classes like .object-left-bottom. It will apply CSS object-position: left bottom; to the image.

        
            


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

    
        
    

All possible combinations that you can use are presented in the table below:

Now let's use the newly acquired knowledge and improve the carousel in our project.