0
0
Tailwindmarkup~5 mins

Object-fit for images and media in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Object-fit helps images or videos fill their space nicely without stretching or cutting important parts.

You want an image to cover a box without stretching or squishing.
You want a video to fit inside a container but keep its shape.
You want to show a profile picture inside a circle without distortion.
You want an image to fill an area but keep its center visible.
Syntax
Tailwind
class="object-contain"
class="object-cover"
class="object-fill"
class="object-none"
class="object-scale-down"

Use these classes on <img> or <video> tags.

They control how the media fits inside its container.

Examples
The image fills the box and crops if needed to keep its shape.
Tailwind
<img src="photo.jpg" class="object-cover w-48 h-32" alt="Cover example">
The image fits inside the box fully, showing all parts but may leave empty space.
Tailwind
<img src="photo.jpg" class="object-contain w-48 h-32" alt="Contain example">
The image stretches to fill the box, which may distort it.
Tailwind
<img src="photo.jpg" class="object-fill w-48 h-32" alt="Fill example">
The image keeps original size and may overflow the box.
Tailwind
<img src="photo.jpg" class="object-none w-48 h-32" alt="None example">
Sample Program

This page shows four images with different object-fit styles using Tailwind CSS. Each image is inside a fixed size box (width 12rem, height 8rem). The border helps see the container edges.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Object-fit Tailwind Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-xl font-semibold mb-4">Object-fit examples with Tailwind CSS</h1>
  <div class="flex gap-6">
    <div>
      <p class="mb-2">object-cover</p>
      <img src="https://via.placeholder.com/400x200" alt="Cover" class="object-cover w-48 h-32 border">
    </div>
    <div>
      <p class="mb-2">object-contain</p>
      <img src="https://via.placeholder.com/400x200" alt="Contain" class="object-contain w-48 h-32 border">
    </div>
    <div>
      <p class="mb-2">object-fill</p>
      <img src="https://via.placeholder.com/400x200" alt="Fill" class="object-fill w-48 h-32 border">
    </div>
    <div>
      <p class="mb-2">object-none</p>
      <img src="https://via.placeholder.com/400x200" alt="None" class="object-none w-48 h-32 border">
    </div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Always add alt text for images for accessibility.

Use fixed width and height on the container or image to see object-fit effects clearly.

Object-fit works best with replaced elements like <img> and <video>.

Summary

Object-fit controls how images or videos fill their containers.

Tailwind CSS provides easy classes like object-cover and object-contain to use this.

Use object-fit to keep media looking good without stretching or cutting important parts.