Part 13: Object-Fit & Object-Position for Responsive Media

Responsive images often distort if their aspect ratio doesn't match the container dimensions. object-fit solves this problem.

1. Object-Fit Utilities

• object-cover: Resizes the image to fill the container, preserving aspect ratio by cropping edges (most common for cards and hero banners).
• object-contain: Resizes the image to fit entirely within the container without cropping.
• object-fill: Default browser behavior; stretches the image to fill, causing distortion.

<div class="h-64 w-full">
  <img 
    src="/landscape.jpg" 
    alt="Landscape" 
    class="w-full h-full object-cover rounded-xl"
  />
</div>

2. Object Position (Focal Points)

When an image is cropped via object-cover, you can specify which part to prioritize: - object-center (default) - object-top (ideal for portraits so heads aren't cut off) - object-bottom

<img src="/person.jpg" class="size-24 rounded-full object-cover object-top" alt="Avatar" />

3. The aspect-* Utilities

Enforce fixed aspect ratios regardless of screen size: - aspect-video (16:9) - aspect-square (1:1)

<iframe class="w-full aspect-video rounded-xl shadow" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

Key Takeaways

• Always pair fixed image dimensions with object-cover to prevent distortion.
• Use aspect-video for responsive video embeds.

In Part 14, we will cover Visibility, Opacity & Box Shadow Utilities!