Object-fit for images and media in Tailwind - Browser Rendering Trace

Render Flow - Object-fit for images and media

[Load HTML with <img>] -> [Parse CSS classes] -> [Apply object-fit property] -> [Calculate replaced element size] -> [Clip or scale image inside container] -> [Paint image with fitting]

The browser loads the image element, applies the object-fit style from Tailwind classes, calculates how the image fits inside its container, then paints the image clipped or scaled accordingly.

Render Steps - 3 Steps

Code Added:<div class="w-48 h-32 border border-gray-400"></div>

Before

[Empty page]

→

After

[___________]
|           |
|           |
|___________|

Added a container box 12rem wide and 8rem tall with a visible border.

🔧 Browser Action:Creates block box with fixed width and height, paints border.

Code Sample

A 12rem by 8rem box with a border containing an image that fills the box and crops to cover it fully.

Tailwind

<div class="w-48 h-32 border border-gray-400">
  <img src="https://via.placeholder.com/150" alt="Sample" class="w-full h-full object-cover" />
</div>

Tailwind

/* Tailwind classes used: */
.w-48 { width: 12rem; }
.h-32 { height: 8rem; }
.border { border-width: 1px; }
.border-gray-400 { border-color: #9ca3af; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.object-cover { object-fit: cover; }

Render Quiz - 3 Questions

After applying step 2, how does the image appear inside the container?

A Stretched to fill width and height, possibly distorted

B Scaled to fit inside without cropping

C Original size, possibly overflowing container

D Cropped to cover container fully

Common Confusions - 2 Topics

Why does my image look stretched or squished when I use w-full and h-full?

Without object-fit, the image stretches to fill width and height exactly, ignoring its original shape, causing distortion (see render_steps 2).

💡 Use object-fit like 'object-cover' or 'object-contain' to keep image proportions.

Why does object-cover crop parts of my image?

object-cover scales the image to fill the container completely, cropping edges if needed to avoid distortion (see render_step 3).

💡 If you want the whole image visible, use object-contain instead.

Property Reference

Property	Value	Visual Effect	Common Use
object-fit	fill	Image stretches to fill container, may distort	Default, fills container
object-fit	contain	Image scales to fit inside container, no cropping	Show full image with empty space
object-fit	cover	Image scales to cover container, cropping edges	Fill container without distortion
object-fit	none	Image keeps original size, may overflow container	Show original image size
object-fit	scale-down	Image scales down to fit container if larger	Prevent overflow, keep aspect ratio

Concept Snapshot

object-fit controls how images fit inside containers. Common values: fill (default, stretches), contain (fit inside), cover (fill and crop). Use with width and height set on image or container. object-cover crops edges but keeps aspect ratio. object-contain shows whole image with empty space. Use Tailwind classes like object-cover, object-contain for easy styling.