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.

Practice

1. What does the CSS property object-fit: cover; do to an image inside a container?

easy

A. It fits the entire image inside the container without cropping.

B. It stretches the image to fill the container, possibly distorting it.

C. It fills the container completely, cropping parts if needed.

D. It repeats the image to fill the container.

Solution

1. Step 1: Understand object-fit: cover; behavior

   This property makes the image fill the container completely, cropping parts if the aspect ratio differs.

2. Step 2: Compare with other options

   Unlike contain which fits without cropping, cover crops to fill fully.

3. Final Answer:

   It fills the container completely, cropping parts if needed. -> Option C

4. Quick Check:

   Cover = fill and crop [OK]

Hint: Cover fills and crops; contain fits without cropping [OK]

Common Mistakes:

• Confusing cover with contain
• Thinking cover stretches without cropping
• Assuming cover repeats the image

2. Which of the following is the correct CSS syntax to make an image fit inside its container without cropping or distortion?

easy

A. object-fit: stretch;

B. object-fit: fill;

C. object-fit: crop;

D. object-fit: contain;

Solution

1. Step 1: Identify the property for fitting without cropping

   object-fit: contain; fits the entire image inside the container without cropping or distortion.

2. Step 2: Check other options

   fill stretches, stretch is invalid, and crop is not a valid value.

3. Final Answer:

   object-fit: contain; -> Option D

4. Quick Check:

   Contain = fit inside without cropping [OK]

Hint: Contain fits fully inside; fill stretches [OK]

Common Mistakes:

• Using invalid value 'stretch'
• Confusing fill with contain
• Thinking crop is a valid value

3. Given this HTML and CSS, what will the image look like in the browser?

<div style="width: 200px; height: 100px;">
  <img src="image.jpg" style="width: 100%; height: 100%; object-fit: contain;">
</div>

medium

A. The entire image fits inside the container without cropping, possibly leaving empty space.

B. The image fills the container and may be cropped.

C. The image stretches and distorts to fill the container.

D. The image repeats to fill the container.

Solution

1. Step 1: Analyze the container and image size

   The container is 200px wide and 100px tall. The image is set to 100% width and height of the container.

2. Step 2: Understand object-fit: contain; effect

   This makes the image scale to fit inside the container fully without cropping or distortion, preserving aspect ratio. Empty space may appear if aspect ratios differ.

3. Final Answer:

   The entire image fits inside the container without cropping, possibly leaving empty space. -> Option A

4. Quick Check:

   Contain = fit inside with possible empty space [OK]

Hint: Contain fits fully, may leave space; cover crops [OK]

Common Mistakes:

• Assuming image will crop with contain
• Thinking image will distort with contain
• Confusing contain with fill

4. You want an image to fill its container without distortion, but it currently stretches oddly. Which CSS fix will solve this?

img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

medium

A. Change object-fit to cover.

B. Remove width and height properties.

C. Change object-fit to contain.

D. Add object-position: center;.

Solution

1. Step 1: Identify the problem with object-fit: fill;

   This stretches the image to fill container width and height, causing distortion.

2. Step 2: Use object-fit: cover; to fix distortion

   cover fills the container while preserving aspect ratio, cropping if needed, preventing distortion.

3. Final Answer:

   Change object-fit to cover. -> Option A

4. Quick Check:

   Cover fills without distortion by cropping [OK]

Hint: Use cover to fill without distortion, fill stretches [OK]

Common Mistakes:

• Using fill causes distortion
• Removing width/height breaks layout
• Thinking object-position fixes distortion

5. You have a video inside a 400px by 300px container. You want the video to fill the container fully without distortion, but keep the center visible if cropping happens. Which CSS is best?

video {
  width: 100%;
  height: 100%;
  object-fit: ?
  object-position: ?
}

hard

A. object-fit: fill; and object-position: left;

B. object-fit: cover; and object-position: center;

C. object-fit: contain; and object-position: top;

D. object-fit: none; and object-position: center;

Solution

1. Step 1: Choose object-fit to fill without distortion

   cover fills the container fully, preserving aspect ratio, cropping if needed.

2. Step 2: Set object-position to keep center visible

   object-position: center; ensures cropping keeps the center area visible.

3. Final Answer:

   object-fit: cover; and object-position: center; -> Option B

4. Quick Check:

   Cover + center = fill fully, crop center visible [OK]

Hint: Cover fills and crops; center keeps main part visible [OK]

Common Mistakes:

• Using contain leaves empty space
• Using fill distorts video
• Ignoring object-position for cropping focus