Tailwind CSS Object Fit Cheatsheet

Complete reference for Tailwind v4 object-fit utilities.
Click any card to copy the class name.

Quick Navigation

Object Fit Comparison Object Position Use Cases FAQ

Object Fit Utilities

Control how replaced content (images, videos) is resized to fit its container.

Visual Comparison

See all object-fit utilities side by side. The blue dashed border shows the container boundaries.

object-contain

object-cover

object-fill

object-none

object-scale-down

Object Position

Control how an image is positioned within its container. These work best with object-cover or object-contain.

Tip: Use object-position with object-cover to control which part of an image is visible when it's cropped. For portraits, use object-top to keep faces visible.

Common Use Cases

Avatar Images

<img
  src="/avatar.jpg"
  class="w-12 h-12 rounded-full object-cover"
/>

Hero Background

<div class="relative h-96">
  <img
    src="/hero.jpg"
    class="absolute inset-0 w-full h-full
           object-cover object-center"
  />
</div>

Product Image

<div class="aspect-square bg-white p-4">
  <img
    src="/product.jpg"
    class="w-full h-full object-contain"
  />
</div>

Thumbnail Gallery

<div class="grid grid-cols-3 gap-2">
  {images.map(img => (
    <img
      src={img}
      class="aspect-square object-cover
             rounded-lg"
    />
  ))}
</div>

Card with Image

<div class="rounded-xl overflow-hidden">
  <img
    src="/card-image.jpg"
    class="h-48 w-full object-cover
           object-top"
  />
  <div class="p-4">
    <h3>Card Title</h3>
  </div>
</div>

Video Cover

<video
  src="/video.mp4"
  class="w-full h-full object-cover"
  autoplay
  muted
  loop
/>

Quick Reference Table

Class	CSS	Behavior
`object-contain`	`object-fit: contain;`	Fit inside, preserve ratio, may letterbox
`object-cover`	`object-fit: cover;`	Fill container, preserve ratio, may crop
`object-fill`	`object-fit: fill;`	Stretch to fill, ignores ratio (distorts)
`object-none`	`object-fit: none;`	No resizing, displays at natural size
`object-scale-down`	`object-fit: scale-down;`	Like contain, but never scales up

Frequently Asked Questions

What is object-fit in Tailwind CSS?

Object-fit in Tailwind CSS controls how replaced content (like images and videos) is resized to fit its container. Tailwind provides utilities like object-contain, object-cover, object-fill, object-none, and object-scale-down to match CSS object-fit property values.

What is the difference between object-cover and object-contain?

object-cover scales the image to fill the container while maintaining aspect ratio, potentially cropping parts of the image. object-contain scales the image to fit within the container while maintaining aspect ratio, potentially leaving empty space (letterboxing).

When should I use object-cover in Tailwind?

Use object-cover when you need an image to completely fill its container without distortion, such as hero images, card backgrounds, avatars, or thumbnail galleries. The image will be cropped if its aspect ratio doesn't match the container.

How do I prevent image distortion in Tailwind?

Use object-contain or object-cover to prevent image distortion. object-contain ensures the entire image is visible within the container, while object-cover fills the container completely. Avoid object-fill as it stretches the image to fit, causing distortion.

What is object-position used for in Tailwind?

Object-position controls how an image is positioned within its container when using object-fit. For example, with object-cover, you can use object-top to align the image to the top, ensuring faces in photos aren't cropped out.

Can I use object-fit with videos in Tailwind?

Yes, object-fit works with any replaced element including videos, iframes, and embeds. Use object-cover on a video element to make it fill a container like a background video.

Inspect Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element including object-fit utilities. Extract any style with 2 clicks.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →