Object fit in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual result of this CSS?

Given this HTML and CSS, what will the image look like inside the 200x200 pixel container?

<div class='box'><img src='image.jpg' alt='Sample' /></div>

.box { width: 200px; height: 200px; } img { width: 100%; height: 100%; object-fit: cover; }

CSS

<div class='box'><img src='image.jpg' alt='Sample' /></div>
.box { width: 200px; height: 200px; }
img { width: 100%; height: 100%; object-fit: cover; }

A The image is shown at its original size, ignoring container dimensions.

B The image stretches to fill the container, ignoring aspect ratio, causing distortion.

C The image fits inside the container without cropping, leaving empty space if aspect ratios differ.

D The image fills the container completely, cropping parts if needed to keep aspect ratio.

💡 Hint

Think about how 'cover' affects the image size and cropping.

The 'object-fit: cover' makes the image fill the container fully while preserving aspect ratio. It crops parts if needed to avoid distortion.

🧠 Conceptual

intermediate

Which object-fit value preserves the entire image without cropping?

You want an image inside a fixed-size box to show fully without any part cut off. Which object-fit value should you use?

A cover

B none

C contain

D fill

💡 Hint

This value fits the whole image inside the container, possibly leaving empty space.

'contain' scales the image to fit inside the container fully without cropping, preserving aspect ratio.

📝 Syntax

advanced

What error does this CSS cause?

Consider this CSS snippet:

img { object-fit: covr; }

What happens when this CSS is applied?

CSS

img { object-fit: covr; }

A The browser throws a syntax error and stops rendering the page.

B The browser ignores the invalid value and uses the default 'fill'.

C The image disappears because of the invalid value.

D The browser applies 'cover' as a fallback automatically.

💡 Hint

Browsers handle unknown CSS values by ignoring them.

Invalid CSS property values are ignored by browsers, so the image uses the default 'fill' for object-fit.

❓ selector

advanced

Which CSS selector targets only images with object-fit set to 'contain'?

You want to style only images that have object-fit: contain applied. Which selector works?

A img[style*='object-fit: contain']

B img:object-fit(contain)

C img.object-fit-contain

D img[object-fit='contain']

💡 Hint

Think about how to select elements by inline style attribute.

Only attribute selectors can match inline styles. 'img[style*="object-fit: contain"]' matches images with that style inline.

❓ accessibility

expert

How does object-fit affect accessibility for screen readers?

Which statement about object-fit and accessibility is true?

A Object-fit affects only visual layout and does not impact screen readers.

B Object-fit changes the image's alt text read by screen readers.

C Using object-fit requires adding ARIA roles to images for accessibility.

D Object-fit can cause screen readers to skip images if set to 'none'.

💡 Hint

Consider what screen readers use to understand images.

Object-fit only changes how images appear visually. Screen readers rely on alt text and do not interpret CSS visual styles.

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