Skip to main content

​
Overview

Use object-fit utilities to control how replaced elements (like images and videos) are resized to fit their containers. These utilities are essential for creating consistent image layouts and maintaining aspect ratios.

​
Object Fit Utilities

Object Fit Properties

.object-coverCoverobject-fit: cover;Cover container, crop if needed
.object-containContainobject-fit: contain;Fit within container, no cropping

​
Object Cover

Use .object-cover to scale the image to cover the entire container while maintaining its aspect ratio. The image will be cropped if necessary to fill the container. 
<img src="image.jpg" class="w-64 h-32 object-cover rounded" alt="Cover image" />

​
Common Use Cases

  • Hero images that need to fill a container
  • Card images with consistent dimensions
  • Gallery thumbnails
  • Background images in fixed-size containers
<!-- Card with cover image -->
<div class="card overflow-hidden rounded-lg">
  <div class="h-48 overflow-hidden">
    <img src="hero.jpg" class="w-full h-full object-cover" alt="Card image" />
  </div>
  <div class="p-6">
    <h3 class="text-xl font-semibold mb-2">Card Title</h3>
    <p class="text-gray">Card content</p>
  </div>
</div>
Always combine .object-cover with .overflow-hidden on the container to ensure clean edges when images are cropped.

​
Object Contain

Use .object-contain to scale the image to fit within the container while maintaining its aspect ratio. The entire image will be visible, but there may be empty space if the aspect ratios don’t match. 
<img
  src="image.jpg"
  class="w-64 h-32 object-contain border border-gray"
  alt="Contain image"
/>

​
Common Use Cases

  • Product images that must be fully visible
  • Logos in fixed-size containers
  • Icons and graphics
  • Images where no cropping is acceptable
<!-- Product image container -->
<div class="w-64 h-64 bg-gray-light p-4 rounded">
  <img
    src="product.jpg"
    class="w-full h-full object-contain"
    alt="Product image"
  />
</div>

​
Object Fit Examples

<div class="flex flex-wrap gap-4">
  <div class="w-48 h-48 overflow-hidden rounded-lg">
    <img
      src="image1.jpg"
      class="w-full h-full object-cover"
      alt="Gallery image 1"
    />
  </div>
  <div class="w-48 h-48 overflow-hidden rounded-lg">
    <img
      src="image2.jpg"
      class="w-full h-full object-cover"
      alt="Gallery image 2"
    />
  </div>
  <div class="w-48 h-48 overflow-hidden rounded-lg">
    <img
      src="image3.jpg"
      class="w-full h-full object-cover"
      alt="Gallery image 3"
    />
  </div>
</div>

​
Hero Section with Cover Image

<section class="relative h-96 overflow-hidden">
  <img src="hero.jpg" class="w-full h-full object-cover" alt="Hero image" />
  <div class="absolute inset-0 bg-black opacity-50"></div>
  <div class="absolute inset-0 flex items-center justify-center">
    <h1 class="text-4xl font-bold text-white">Hero Title</h1>
  </div>
</section>

​
Product Grid with Contain

<div class="flex flex-wrap gap-6">
  <div class="w-64">
    <div class="h-48 bg-gray-light p-4 rounded mb-4">
      <img
        src="product1.jpg"
        class="w-full h-full object-contain"
        alt="Product 1"
      />
    </div>
    <h3 class="text-lg font-semibold">Product Name</h3>
  </div>
  <div class="w-64">
    <div class="h-48 bg-gray-light p-4 rounded mb-4">
      <img
        src="product2.jpg"
        class="w-full h-full object-contain"
        alt="Product 2"
      />
    </div>
    <h3 class="text-lg font-semibold">Product Name</h3>
  </div>
</div>

​
Avatar with Cover

<div class="flex items-center gap-4">
  <div class="w-16 h-16 overflow-hidden rounded-full">
    <img src="avatar.jpg" class="w-full h-full object-cover" alt="Avatar" />
  </div>
  <div>
    <h4 class="font-semibold">User Name</h4>
    <p class="text-sm text-gray">User description</p>
  </div>
</div>

​
Best Practices

1

Use Cover for Consistent Layouts

Use .object-cover when you need images to fill containers consistently, like in card grids or galleries.
2

Use Contain for Important Content

Use .object-contain when the entire image must be visible, like product photos or logos.
3

Combine with Overflow Hidden

Always use .overflow-hidden on the container when using .object-cover to ensure clean edges.
4

Set Container Dimensions

Always set explicit width and height on containers when using object-fit utilities.

​
Common Patterns

​
Responsive Image Container

<div class="w-full aspect-video overflow-hidden rounded-lg">
  <img
    src="image.jpg"
    class="w-full h-full object-cover"
    alt="Responsive image"
  />
</div>

​
Logo Container

<div class="w-32 h-16 bg-white p-2 rounded">
  <img src="logo.png" class="w-full h-full object-contain" alt="Logo" />
</div>

​
Thumbnail Grid

<div class="grid grid-cols-4 gap-2">
  <div class="aspect-square overflow-hidden rounded">
    <img
      src="thumb1.jpg"
      class="w-full h-full object-cover"
      alt="Thumbnail 1"
    />
  </div>
  <div class="aspect-square overflow-hidden rounded">
    <img
      src="thumb2.jpg"
      class="w-full h-full object-cover"
      alt="Thumbnail 2"
    />
  </div>
  <!-- More thumbnails... -->
</div>

Aspect Ratio

Control container aspect ratios

Overflow

Control content overflow behavior

Sizing

Width and height utilities

Layout

All layout utilities overview