How does Object Fit work in Tailwind? | Tailwind CSS Interview Questions

What You'll Learn

Object fit options
Object position
Common patterns

Object Fit Classes

index.htmlHTML

<img class="object-cover" />  <!-- Crop to fill -->
<img class="object-contain" />  <!-- Fit inside -->
<img class="object-fill" />  <!-- Stretch to fill -->
<img class="object-none" />  <!-- Original size -->
<img class="object-scale-down" />  <!-- Smaller of none/contain -->

Object Position

index.htmlHTML

<img class="object-cover object-center" />
<img class="object-cover object-top" />
<img class="object-cover object-left-bottom" />

Common Pattern: Card Image

index.htmlHTML

<div class="w-full h-48">
  <img
    src="..."
    class="w-full h-full object-cover object-center"
    alt="..."
  />
</div>

Background Alternative

index.htmlHTML

<div class="bg-cover bg-center h-48" style="background-image: url(...)">
</div>

<!-- Or with arbitrary value -->
<div class="bg-[url('/image.jpg')] bg-cover bg-center h-48">
</div>