tailwindcss object fit bottom

<img class="object-none object-left-top bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-top bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-right-top bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-left bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-center bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-right bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-left-bottom bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-bottom bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-right-bottom bg-yellow-300 w-24 h-24 ..." src="...">

Tailwind CSS Object fit allows you to fit an object to the parent container. You can use several object classes to position the element. For, instance to position the object to the bottom you would use:

<img class="object-cover object-bottom" src="...">
BETA Snippet explanation automatically generated by OpenAI:

Here is what the above code is doing:
1. The `img` tag is a table cell, so it is a child of the `td` tag.
2. The `img` tag is a child of the `td` tag, so it is a sibling of the other `td` tags.
3. The

Snippet By Tony Lea

·

Created June 15th, 2021

·

Report Snippet