Object Fit Utilities object-*

Control how replaced elements like images and videos are resized to fit their containers.

Quick Reference

object-contain

Fit within container

object-fit: contain

object-cover

Cover entire container

object-fit: cover

object-fill

Stretch to fill

object-fit: fill

object-none

Original size

object-fit: none

object-scale-down

Scale down if needed

object-fit: scale-down

Interactive Examples

Object Contain

Landscape

✓ Entire image visible

✓ Maintains aspect ratio

✓ May have empty space

<img class="w-full h-48 object-contain" src="..." />

Object Cover

Landscape

✓ Fills entire container

✓ Maintains aspect ratio

✓ May crop parts of image

<img class="w-full h-48 object-cover" src="..." />

Object Fill

Landscape

✓ Fills entire container

⚠️ May distort aspect ratio

✓ No cropping or empty space

<img class="w-full h-48 object-fill" src="..." />

Object None

Landscape

✓ Original size maintained

✓ No scaling applied

⚠️ May overflow or be clipped

<img class="w-full h-48 object-none" src="..." />

Side-by-Side Comparison

contain

Portrait

cover

Portrait

fill

Portrait

Common Use Cases

🖼️ Gallery Thumbnails

Use object-cover for consistent thumbnail sizes.

<img class="object-cover w-32 h-32">

🎥 Video Players

Use object-contain to show full video without cropping.

<video class="object-contain">

🏷️ Product Images

Use object-contain to show entire product.

<img class="object-contain">

🎨 Hero Banners

Use object-cover for full-width hero images.

<img class="object-cover h-96">

👤 Profile Pictures

Use object-cover for circular profile images.

<img class="object-cover rounded-full">

📱 Card Images

Use object-cover for consistent card layouts.

<img class="object-cover h-48">

Best Practices

✅ Do

  • • Use object-cover for hero images and banners
  • • Use object-contain for product images
  • • Combine with object-position for fine control
  • • Test with various aspect ratios
  • • Consider loading states and fallbacks
  • • Use appropriate alt text for accessibility

❌ Don't

  • • Use object-fill unless distortion is acceptable
  • • Forget to set container dimensions
  • • Use on non-replaced elements
  • • Ignore performance implications of large images
  • • Use without considering mobile layouts
  • • Apply to elements that don't need it

Related Layout Classes

object-*

Current page

object-center

Object position utilities

overflow-*

Overflow utilities