Tailwind CSS Object Position Cheatsheet
Control how images and videos are positioned within their containers.
Click any class to copy to clipboard.
Quick Navigation
Object Position
Use object-{position} to control how an image or video should be positioned within its container. Works best with object-cover or object-none.
Tip: Object position only has a visible effect when the image is scaled using object-cover, object-none, or object-scale-down.
Object Fit
Use object-{fit} to control how an image or video is resized to fit its container.
object-cover
Scales the image to cover the entire container while maintaining aspect ratio. Parts of the image may be cropped.
object-contain
Scales the image to fit within the container while maintaining aspect ratio. May leave empty space.
object-fill
Stretches the image to fill the container exactly. Aspect ratio is not preserved.
object-none
Displays the image at its original size. Parts may be hidden or space may be empty.
Common Examples
Avatar with Face Focus
<img class="object-cover object-top" /> <img class="object-cover object-center" />
Hero Image with Bottom Focus
<div class="h-64 w-full overflow-hidden">
<img
src="hero.jpg"
class="w-full h-full object-cover object-bottom"
/>
</div>Thumbnail Gallery
<div class="grid grid-cols-3 gap-2"> <img class="aspect-square object-cover object-center" /> <img class="aspect-square object-cover object-center" /> <img class="aspect-square object-cover object-center" /> </div>
Card with Image
<div class="card w-80 bg-base-100 shadow-xl">
<figure class="h-48 overflow-hidden">
<img
src="product.jpg"
alt="Product"
class="w-full h-full object-cover object-center"
/>
</figure>
<div class="card-body">
<h2 class="card-title">Product Name</h2>
<p>Description text here...</p>
</div>
</div>Responsive Object Position
<!-- Different positions at different breakpoints --> <img class="object-cover object-left md:object-center lg:object-right" /> <!-- Change object-fit at breakpoints --> <img class="object-contain md:object-cover" />
Quick Reference
| Class | CSS Property |
|---|---|
object-bottom | object-position: bottom |
object-center | object-position: center |
object-left | object-position: left |
object-left-bottom | object-position: left bottom |
object-left-top | object-position: left top |
object-right | object-position: right |
object-right-bottom | object-position: right bottom |
object-right-top | object-position: right top |
object-top | object-position: top |
Object Fit Classes
| Class | CSS Property |
|---|---|
object-contain | object-fit: contain |
object-cover | object-fit: cover |
object-fill | object-fit: fill |
object-none | object-fit: none |
object-scale-down | object-fit: scale-down |
Arbitrary Values
Use bracket notation for custom object positions not included in the default scale.
<!-- Custom position with percentages --> <img class="object-[25%_75%]" /> <!-- Custom position with length values --> <img class="object-[10px_20px]" /> <!-- Mix of keyword and percentage --> <img class="object-[center_25%]" />
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