Object Position

Controls the positioning of replaced elements like images and videos within their containing box when using object-fit. This allows you to focus on specific parts of media that should remain visible when cropped. In Tailwind v4, object-position works fluidly with other modern layout utilities and supports logical properties for better RTL handling.

Layout1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="w-full h-64 bg-gray-200">
  <img class="w-full h-full object-cover object-center" src="example.jpg" alt="Centered image">
</div>

Examples

Center positioning (default)

<div class="w-full h-64 bg-gray-200">
  <img class="w-full h-full object-cover object-center" src="example.jpg" alt="Centered image">
</div>

Edit in playground

Top positioning - ensures the top of the image remains visible when cropped

<div class="w-full h-64 bg-gray-200">
  <img class="w-full h-full object-cover object-top" src="example.jpg" alt="Top-aligned image">
</div>

Edit in playground

Gallery demonstrating different object-position values for photo composition

<!-- Gallery with different focus points -->
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
  <div class="aspect-square bg-gray-100 overflow-hidden">
    <img class="w-full h-full object-cover object-center" src="image1.jpg" alt="Center focused">
  </div>
  <div class="aspect-square bg-gray-100 overflow-hidden">
    <img class="w-full h-full object-cover object-top" src="image2.jpg" alt="Top focused">
  </div>
  <div class="aspect-square bg-gray-100 overflow-hidden">
    <img class="w-full h-full object-cover object-bottom" src="image3.jpg" alt="Bottom focused">
  </div>
  <div class="aspect-square bg-gray-100 overflow-hidden">
    <img class="w-full h-full object-cover object-left" src="image4.jpg" alt="Left focused">
  </div>
  <div class="aspect-square bg-gray-100 overflow-hidden">
    <img class="w-full h-full object-cover object-right" src="image5.jpg" alt="Right focused">
  </div>
  <div class="aspect-square bg-gray-100 overflow-hidden">
    <img class="w-full h-full object-cover object-left-top" src="image6.jpg" alt="Top-left focused">
  </div>
</div>

Edit in playground

Product imagery that uses object-position to highlight different parts of the product

<!-- Product image with focus on details -->
<div class="w-full max-w-md mx-auto">
  <div class="aspect-[4/3] bg-gray-100 overflow-hidden mb-4 rounded-lg">
    <img class="w-full h-full object-cover object-bottom" src="product.jpg" alt="Product details" />
  </div>
  <div class="flex gap-2 overflow-x-auto py-2">
    <!-- Thumbnail navigation -->
    <button class="w-16 h-16 flex-shrink-0 rounded overflow-hidden border-2 border-blue-500">
      <img class="w-full h-full object-cover object-top" src="product.jpg" alt="View top" />
    </button>
    <button class="w-16 h-16 flex-shrink-0 rounded overflow-hidden border-2 border-transparent hover:border-blue-500">
      <img class="w-full h-full object-cover object-center" src="product.jpg" alt="View center" />
    </button>
    <button class="w-16 h-16 flex-shrink-0 rounded overflow-hidden border-2 border-transparent hover:border-blue-500">
      <img class="w-full h-full object-cover object-bottom" src="product.jpg" alt="View bottom" />
    </button>
  </div>
</div>

Edit in playground

Live Preview

Try the Object Position utility with different values

Open Interactive Playground

Variants

Positions the image within its container when using object-fit: bottom, center (default), top, left, right, and combined positions like left-top (top-left corner)

bottomcenterleftleft-bottomleft-toprightright-bottomright-toptop