Bird
Raised Fist0
Tailwindmarkup~5 mins

Object-fit for images and media in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. What does the Tailwind CSS class object-cover do to an image inside a container?
easy
A. It makes the image fill the container completely, cropping if needed.
B. It shrinks the image to fit inside the container without cropping.
C. It stretches the image to fill the container, ignoring aspect ratio.
D. It hides the image if it is larger than the container.

Solution

  1. Step 1: Understand object-cover behavior

    The object-cover class makes the image fill the container fully, keeping aspect ratio but cropping parts if needed.

  2. Step 2: Compare with other options

    Other options describe shrinking or stretching, which object-cover does not do.

  3. Final Answer:

    It makes the image fill the container completely, cropping if needed. -> Option A

  4. Quick Check:

    object-cover = fill with cropping [OK]
Hint: Remember: cover fills and crops, contain fits inside [OK]
Common Mistakes:
  • Confusing object-cover with object-contain
  • Thinking object-cover stretches image
  • Assuming object-cover hides overflow
2. Which Tailwind CSS class correctly applies the object-fit property to make an image fit inside its container without cropping?
easy
A. object-scale
B. object-stretch
C. object-fill
D. object-contain

Solution

  1. Step 1: Identify the class for fitting inside container

    The object-contain class makes the image fit inside the container without cropping, preserving aspect ratio.

  2. Step 2: Check other options for validity

    object-stretch and object-scale are not valid Tailwind classes; object-fill stretches the image, which is not fitting without cropping.

  3. Final Answer:

    object-contain -> Option D

  4. Quick Check:

    Contain fits inside without crop = object-contain [OK]
Hint: Contain fits inside, cover fills and crops [OK]
Common Mistakes:
  • Using non-existent classes like object-stretch
  • Confusing object-fill with object-contain
  • Assuming object-fill preserves aspect ratio
3. Given this HTML snippet:
<div class="w-40 h-40">
  <img src="photo.jpg" class="object-contain w-full h-full" alt="Sample" />
</div>

How will the image appear inside the 160x160 pixel container?
medium
A. The image will fill the container fully, cropping parts if needed.
B. The image will fit inside the container entirely, showing all parts with possible empty space.
C. The image will stretch to fill the container ignoring aspect ratio.
D. The image will overflow outside the container.

Solution

  1. Step 1: Analyze the container and image classes

    The container is 10rem by 10rem (w-40 h-40). The image uses object-contain with full width and height.

  2. Step 2: Understand object-contain effect

    object-contain scales the image to fit inside the container fully without cropping, preserving aspect ratio, so some empty space may appear.

  3. Final Answer:

    The image will fit inside the container entirely, showing all parts with possible empty space. -> Option B

  4. Quick Check:

    object-contain = fit inside with no crop [OK]
Hint: object-contain fits image fully inside container [OK]
Common Mistakes:
  • Thinking object-contain crops image
  • Assuming image stretches ignoring aspect ratio
  • Ignoring container size constraints
4. You want an image to fill its container without distortion and crop overflow parts. You wrote:
<img src="pic.jpg" class="object-contain w-full h-full" alt="Pic" />

Why does the image not crop and instead show empty space?
medium
A. Because the image file is too small.
B. Because w-full and h-full are missing.
C. Because object-contain fits the whole image inside, no cropping.
D. Because object-contain crops the image by default.

Solution

  1. Step 1: Understand object-contain behavior

    object-contain scales the image to fit inside the container fully without cropping, preserving aspect ratio, so empty space can appear.

  2. Step 2: Check other options for correctness

    w-full and h-full are present, image size does not affect cropping behavior, and object-contain does not crop by design.

  3. Final Answer:

    Because object-contain fits the whole image inside, no cropping. -> Option C

  4. Quick Check:

    object-contain = no crop, fits inside [OK]
Hint: Contain never crops; cover crops to fill [OK]
Common Mistakes:
  • Thinking object-contain crops image
  • Missing width or height classes
  • Blaming image size for cropping
5. You want a responsive image that always fills its container fully on all screen sizes, cropping if needed, but never distorts. Which Tailwind classes should you use?
<img src="landscape.jpg" alt="Landscape" class="?" />
hard
A. object-cover w-full h-full
B. object-contain w-full h-auto
C. object-fill w-auto h-auto
D. object-none w-full h-full

Solution

  1. Step 1: Identify requirement for full container fill with cropping

    The image must fill the container fully, cropping if needed, without distortion.

  2. Step 2: Match Tailwind classes to requirements

    object-cover fills container fully with cropping and preserves aspect ratio (no distortion). w-full h-full ensures it fills container size responsively.

  3. Step 3: Check other options

    object-contain fits inside without cropping, object-fill stretches (distorts), object-none shows original size without fitting.

  4. Final Answer:

    object-cover w-full h-full -> Option A

  5. Quick Check:

    Cover + full width/height = fill with crop, no distortion [OK]
Hint: Use object-cover with full width and height for cropping fill [OK]
Common Mistakes:
  • Using object-contain when cropping is needed
  • Using object-fill causing distortion
  • Not setting both width and height to full