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.