Object-fit for images and media in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What will the image look like with object-fit: cover?

Consider an image inside a fixed 200x200 pixel container. The image is larger and rectangular. The CSS class object-cover is applied to the image.

What will the image look like inside the container?

Tailwind

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

A The image will stretch to fill the container, ignoring its aspect ratio.

B The image will be fully visible, scaled down to fit inside the container with empty space around it.

C The image will fill the container completely, cropping parts that overflow while keeping aspect ratio.

D The image will be centered but not resized, showing only the top-left part.

💡 Hint

Think about how cover behaves: it fills the container while keeping the image's shape, even if some parts get cut off.

The object-cover class applies object-fit: cover;. This makes the image fill the container completely, preserving its aspect ratio. If the image's shape doesn't match the container, parts of the image will be cropped.

❓ selector

intermediate

Which Tailwind class sets object-fit: contain?

You want an image to scale down to fit inside its container without cropping, showing the entire image with possible empty space.

Which Tailwind CSS class achieves this?

A object-contain

B object-fill

C object-cover

D object-scale-down

💡 Hint

Remember, contain keeps the whole image visible inside the container.

The object-contain class applies object-fit: contain; which scales the image to fit inside the container while preserving aspect ratio. It may leave empty space if the aspect ratios differ.

🧠 Conceptual

advanced

What happens if you use object-fit: scale-down on an image?

Given an image inside a container, what is the behavior of object-fit: scale-down?

A The image is always scaled up to fill the container, cropping if needed.

B The image is scaled down to fit inside the container only if it is larger; otherwise, it keeps its original size.

C The image is centered and clipped without resizing.

D The image is stretched to fill the container ignoring aspect ratio.

💡 Hint

Think about when the image is smaller or larger than the container.

object-fit: scale-down; compares none and contain behaviors and applies whichever results in a smaller image. So it scales down if needed but never scales up.

❓ accessibility

advanced

How to ensure images with object-fit remain accessible?

You use object-fit to style images on your webpage. What is the best practice to keep images accessible?

A Always add descriptive <code>alt</code> text and ensure images are keyboard focusable if interactive.

B Use empty <code>alt</code> attributes to hide images from screen readers.

C Avoid using <code>alt</code> attributes because <code>object-fit</code> changes image shape.

D Add <code>aria-hidden="true"</code> to all images styled with <code>object-fit</code>.

💡 Hint

Think about screen readers and users who rely on them.

Images styled with object-fit should always have meaningful alt text describing their content. If images are interactive, they must be keyboard accessible. Hiding images or removing alt harms accessibility.

❓ layout

expert

Which Tailwind classes create a responsive square container with an image that covers it fully?

You want a square container that adjusts size with the screen width. Inside it, an image should fill the container completely, cropping if needed, and keep its aspect ratio.

Which combination of Tailwind CSS classes achieves this?

A Use <code>aspect-square max-w-xs</code> on the container and <code>object-scale-down w-full h-full</code> on the image.

B Use <code>w-64 h-64</code> on the container and <code>object-contain w-full h-full</code> on the image.

C Use <code>aspect-video w-full</code> on the container and <code>object-fill w-full h-full</code> on the image.

D Use <code>aspect-square w-full max-w-sm</code> on the container and <code>object-cover w-full h-full</code> on the image.

💡 Hint

Remember aspect-square keeps a square ratio and object-cover fills the container cropping if needed.

The aspect-square class ensures the container is always square and responsive. The image with object-cover w-full h-full fills the container fully, cropping excess parts while preserving aspect ratio.