Object Position Utilities object-*

Control the position of replaced elements like images and videos within their containers.

Quick Reference

object-bottom

Bottom alignment

object-position: bottom

object-center

Center alignment

object-position: center

object-left

Left alignment

object-position: left

object-right

Right alignment

object-position: right

object-top

Top alignment

object-position: top

object-left-bottom

Left bottom corner

object-position: left bottom

object-left-top

Left top corner

object-position: left top

object-right-bottom

Right bottom corner

object-position: right bottom

object-right-top

Right top corner

object-position: right top

Interactive Examples

Basic Positions

object-top

Landscape

object-center

Landscape

object-bottom

Landscape
<img class="object-cover object-center" src="..." />

Corner Positions

object-left-top

Portrait

object-right-top

Portrait

object-left-bottom

Portrait

object-right-bottom

Portrait

Side Positions

object-left

Wide landscape

object-right

Wide landscape

Practical Example: Profile Cards

Profile
John Doe

Software Engineer

✓ Profile image centered for best composition

✓ Consistent appearance across different image ratios

Common Use Cases

👤 Profile Pictures

Center faces in profile images for better composition.

<img class="object-cover object-center">

🏞️ Hero Images

Position focal points in hero banners.

<img class="object-cover object-bottom">

🏷️ Product Images

Focus on important product features.

<img class="object-cover object-top">

📰 Article Thumbnails

Position key elements in thumbnail crops.

<img class="object-cover object-left-top">

🎥 Video Thumbnails

Show important video content in previews.

<video class="object-cover object-center">

🖼️ Gallery Items

Consistent positioning across gallery images.

<img class="object-cover object-center">

Position Reference Guide

Position Grid

left-top
top
right-top
left
center
right
left-bottom
bottom
right-bottom

When to Use Each Position

object-center

Default choice for most images, provides balanced composition

object-top

When important content is at the top (faces, headlines)

object-bottom

For landscapes, products on surfaces, or bottom-heavy content

object-left/right

When focal point is on one side of the image

Corner positions

For specific focal points or when content is in corners

Best Practices

✅ Do

  • • Use object-center as default for most images
  • • Consider the focal point of your images
  • • Test with different image aspect ratios
  • • Combine with object-cover for best results
  • • Use consistent positioning across similar elements
  • • Consider mobile vs desktop positioning needs

❌ Don't

  • • Use without considering image content
  • • Apply to elements that don't need positioning
  • • Forget to test with various image sizes
  • • Use complex positioning without purpose
  • • Ignore accessibility implications
  • • Use on non-replaced elements

Related Layout Classes

object-contain

Object fit utilities

object-center

Current page

overflow-*

Overflow utilities