Object fit in CSS - Browser Rendering Trace

Render Flow - Object fit

[Parse CSS] -> [Match selector to <img>] -> [Apply object-fit property] -> [Calculate replaced element size] -> [Adjust image rendering inside container] -> [Paint image with fit]

The browser reads the CSS, finds the image element, applies the object-fit property, calculates how the image fits inside its container, then paints the image accordingly.

Render Steps - 6 Steps

Code Added:img { width: 100%; height: 100%; }

Before

[Container 20rem x 12rem]
[Image at natural size]

→

After

[Container 20rem x 12rem]
[Image stretched to fill container, distorted]

The image stretches to fill the container's width and height, but the aspect ratio is not preserved, causing distortion.

🔧 Browser Action:Calculates replaced element size, stretches image to container size, triggers reflow and repaint

Code Sample

A fixed-size box with an image inside that fills the box using object-fit to control how the image scales and crops.

CSS

<div class="container">
  <img src="photo.jpg" alt="Sample photo">
</div>

CSS

.container {
  width: 20rem;
  height: 12rem;
  border: 2px solid #333;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Render Quiz - 3 Questions

After applying object-fit: contain (render_step 3), what do you see inside the container?

A Image fills container fully, parts cropped

B Image scaled to fit inside container with empty space

C Image stretched and distorted

D Image at natural size, no scaling

Common Confusions - 3 Topics

Why does my image look stretched and blurry inside the container?

If you set width and height to 100% but use object-fit: fill (default), the image stretches ignoring aspect ratio, causing distortion.

💡 Use object-fit: contain or cover to keep aspect ratio and avoid stretching (see render_steps 1 and 3).

Why is there empty space around my image inside the container?

object-fit: contain scales the image to fit inside the container while preserving aspect ratio, so empty space appears if aspect ratios differ.

💡 Use object-fit: cover to fill container fully but expect cropping (see render_steps 3 and 4).

Why does my image overflow the container or not scale at all?

object-fit: none shows the image at its natural size without scaling, so it can overflow if bigger than container.

💡 Use object-fit: scale-down to limit size or cover/contain to control scaling (see render_steps 5 and 6).

Property Reference

Property	Value	Visual Effect	When to Use
object-fit	fill	Image stretched to fill container, aspect ratio ignored	Default, when distortion is acceptable
object-fit	contain	Image scaled to fit inside container, aspect ratio preserved, empty space visible	Show whole image without cropping
object-fit	cover	Image fills container, aspect ratio preserved, parts cropped	Fill container fully, crop excess
object-fit	none	Image shown at natural size, no scaling, may overflow	Show image at original size
object-fit	scale-down	Image scaled down to fit container if larger, else natural size	Show image at natural size or smaller if needed

Concept Snapshot

object-fit controls how replaced elements like images fit inside their containers. Values: fill (default, stretches), contain (fit inside, no crop), cover (fill and crop), none (natural size), scale-down (smaller of none or contain). Use with width and height set to container size. Preserves aspect ratio except fill. Helps avoid distortion or unwanted cropping.