Object Fit

Controls how replaced elements like images and videos should be resized and positioned within their containers. This is crucial for responsive design, allowing media to adapt beautifully to different container dimensions without distortion. In Tailwind v4, object-fit utilities work seamlessly with aspect-ratio and other modern layout features.

Layout1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="w-full h-64 bg-gray-200">
  <img class="w-full h-full object-cover" src="example.jpg" alt="Cover example">
</div>

Examples

Cover: image fills container while maintaining aspect ratio, may crop edges

<div class="w-full h-64 bg-gray-200">
  <img class="w-full h-full object-cover" src="example.jpg" alt="Cover example">
</div>

Edit in playground

Contain: image fits entirely within container while maintaining aspect ratio, may have space around it

<div class="w-full h-64 bg-gray-200">
  <img class="w-full h-full object-contain" src="example.jpg" alt="Contain example">
</div>

Edit in playground

Visual comparison of different object-fit values

<!-- Comparison of different object-fit values -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="aspect-video bg-gray-100">
    <img class="w-full h-full object-cover" src="example.jpg" alt="Cover">
    <p class="text-center text-sm mt-2">object-cover</p>
  </div>
  <div class="aspect-video bg-gray-100">
    <img class="w-full h-full object-contain" src="example.jpg" alt="Contain">
    <p class="text-center text-sm mt-2">object-contain</p>
  </div>
  <div class="aspect-video bg-gray-100">
    <img class="w-full h-full object-fill" src="example.jpg" alt="Fill">
    <p class="text-center text-sm mt-2">object-fill</p>
  </div>
</div>

Edit in playground

Real-world example of a hero section with object-cover for the background image

<!-- Hero section with background image -->
<section class="relative h-96">
  <img class="absolute inset-0 w-full h-full object-cover" src="hero.jpg" alt="Hero image">
  <div class="absolute inset-0 bg-black bg-opacity-40"></div>
  <div class="relative h-full flex items-center justify-center p-6 text-white">
    <div class="text-center">
      <h1 class="text-4xl font-bold mb-4">Welcome to Our Site</h1>
      <p class="text-xl">Discover amazing content and services</p>
    </div>
  </div>
</section>

Edit in playground

Live Preview

Try the Object Fit utility with different values

Open Interactive Playground

Variants

contain: scales to fit entirely within box, maintaining aspect ratio; cover: fills entire box, maintaining aspect ratio (may crop); fill: stretches to fill box, ignoring aspect ratio; none: not resized; scale-down: like contain or none, whichever is smaller

containcoverfillnonescale-down