Tailwind CSS - Object Fit

Tailwind CSS: Object Fit

The object-fit utilities in Tailwind CSS control how a replaced element, such as an <img> or <video>, should be resized to fit its container. This is essential for maintaining aspect ratios and preventing media from being distorted.

Object Fit Classes

These are the core utility classes for controlling the object-fit property.

Class	CSS Properties	Behavior
object-contain	object-fit: contain;	Resizes the content to fit inside the container while preserving its aspect ratio. Letterboxing may occur.
object-cover	object-fit: cover;	Fills the entire container, preserving aspect ratio but cropping the content if necessary.
object-fill	object-fit: fill;	Stretches the content to fill the container, ignoring its original aspect ratio. Often causes distortion.
object-none	object-fit: none;	Displays the content at its original size, ignoring the container’s dimensions. Content may be clipped.
object-scale-down	object-fit: scale-down;	Behaves like object-contain or object-none, whichever results in a smaller content size.

Practical Application: Building an Image Gallery

The best way to understand object-fit is to see all the variations side-by-side. The following example creates a gallery where each image uses a different object-fit utility, demonstrating their distinct behaviors. All images are inside identically sized containers.

Example: Object Fit Comparison

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Object Fit Comparison</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
  <main class="max-w-6xl mx-auto">
    <h1 class="text-3xl font-bold mb-8 text-center text-gray-800">Object Fit Gallery</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Object Contain -->
      <figure class="bg-white p-4 rounded-lg shadow-md">
        <div class="w-full h-64 bg-black/10 rounded overflow-hidden">
          <img src="https://placehold.co/600x400/3498db/ffffff" alt="A wide placeholder image" class="w-full h-full object-contain">
        </div>
        <figcaption class="mt-4 text-center font-semibold">`object-contain`</figcaption>
      </figure>

      <!-- Object Cover -->
      <figure class="bg-white p-4 rounded-lg shadow-md">
        <div class="w-full h-64 bg-black/10 rounded overflow-hidden">
          <img src="https://placehold.co/600x400/2ecc71/ffffff" alt="A wide placeholder image" class="w-full h-full object-cover">
        </div>
        <figcaption class="mt-4 text-center font-semibold">`object-cover`</figcaption>
      </figure>

      <!-- Object Fill -->
      <figure class="bg-white p-4 rounded-lg shadow-md">
        <div class="w-full h-64 bg-black/10 rounded overflow-hidden">
          <img src="https://placehold.co/600x400/e74c3c/ffffff" alt="A wide placeholder image" class="w-full h-full object-fill">
        </div>
        <figcaption class="mt-4 text-center font-semibold">`object-fill`</figcaption>
      </figure>

      <!-- Object None -->
      <figure class="bg-white p-4 rounded-lg shadow-md">
        <div class="w-full h-64 bg-black/10 rounded overflow-hidden">
          <img src="https://placehold.co/600x400/f1c40f/ffffff" alt="A wide placeholder image" class="w-full h-full object-none">
        </div>
        <figcaption class="mt-4 text-center font-semibold">`object-none`</figcaption>
      </figure>

      <!-- Object Scale Down -->
      <figure class="bg-white p-4 rounded-lg shadow-md">
        <div class="w-full h-64 bg-black/10 rounded overflow-hidden">
          <img src="https://placehold.co/600x400/9b59b6/ffffff" alt="A wide placeholder image" class="w-full h-full object-scale-down">
        </div>
        <figcaption class="mt-4 text-center font-semibold">`object-scale-down`</figcaption>
      </figure>

       <!-- Object Cover with Position -->
       <figure class="bg-white p-4 rounded-lg shadow-md">
        <div class="w-full h-64 bg-black/10 rounded overflow-hidden">
          <img src="https://placehold.co/600x400/1abc9c/ffffff" alt="A wide placeholder image" class="w-full h-full object-cover object-top">
        </div>
        <figcaption class="mt-4 text-center font-semibold">`object-cover object-top`</figcaption>
      </figure>

    </div>
  </main>
</body>
</html>

Best Practices & Related Utilities

• When to use object-cover: This is the most common choice for UI cards, hero backgrounds, and avatars. It ensures the container is always filled with the image, providing a clean and consistent look, even if some of the image is cropped.
• When to use object-contain: Use this when it’s critical to see the entire image, such as in a product gallery, a logo display, or a light-box preview.
• Avoid object-fill: Unless you have a specific reason to distort an image, you should almost always avoid object-fill.
• Accessibility First: Always include a descriptive alt attribute on your <img> tags for screen readers and in case the image fails to load.
• Control Cropping with object-position: When using object-cover, you can control which part of the image remains visible by using object position utilities like object-center, object-top, object-bottom-left, etc. The final card in the example above demonstrates object-top.