Tailwind CSS class .object-contain / .object-*

<div class="bg-gray-300 w-64 m-2 inline-flex justify-center">
    <img class="object-cointain h-24 w-full" src="https://tailwind.build/placeholders/icons/message.svg"/>
</div>

<div class="bg-gray-300 w-64 m-2 inline-flex justify-center">
    <img class="object-cover h-24 w-full" src="https://tailwind.build/placeholders/icons/message.svg"/>
</div>

<div class="bg-gray-300 w-64 m-2 inline-flex justify-center">
    <img class="object-fill h-24 w-full" src="https://tailwind.build/placeholders/icons/message.svg"/>
</div>

<div class="bg-gray-300 w-64 m-2 inline-flex justify-center">
    <img class="object-none h-24 w-full" src="https://tailwind.build/placeholders/icons/message.svg"/>
</div>

<div class="bg-gray-300 w-64 m-2 inline-flex justify-center">
    <img class="object-scale-down h-24 w-full" src="https://tailwind.build/placeholders/icons/message.svg"/>
</div>

.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; }