object-position property in Tailwind CSS is used to specify
the position of an image or video within its container. It accepts the
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:
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:
|object-top||Position at the top|
|object-center||Position at the center|
|object-bottom||Position at the bottom|
|object-left||Position at the left|
|object-right||Position at the right|
|object-top-left||Position at top left corner|
|object-top-right||Position at top right corner|
|object-bottom-left||Position at bottom left corner|
|object-bottom-right||Position at bottom right corner|
|object-left-top||Position at left top corner|
|object-right-top||Position at right top corner|
|object-left-bottom||Position at left bottom corner|
|object-right-bottom||Position at right bottom corner|
Now let's use the newly acquired knowledge and improve the carousel in our project.
Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.