Object-fit for images and media in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the image cover its container using Tailwind CSS.

Tailwind

<img src="image.jpg" alt="Sample" class="object-[1] w-full h-64" />

Drag options to blanks, or click blank then click option'

Acover

Bfill

Ccontain

Dnone

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'contain' which fits the image inside but may leave empty space.

Using 'fill' which stretches the image and may distort it.

The object-cover class makes the image cover the entire container while maintaining aspect ratio.

2fill in blank

medium

Complete the code to make the video fit inside its container without cropping using Tailwind CSS.

Tailwind

<video class="object-[1] w-full h-48" controls>
  <source src="video.mp4" type="video/mp4">
</video>

Drag options to blanks, or click blank then click option'

Acover

Bscale-down

Cnone

Dcontain

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'cover' which crops parts of the video.

Using 'none' which may not resize the video.

The object-contain class makes the video fit inside the container without cropping, preserving aspect ratio.

3fill in blank

hard

Fix the error in the Tailwind class to make the image fill the container without preserving aspect ratio.

Tailwind

<img src="photo.png" alt="Photo" class="object-[1] w-40 h-40" />

Drag options to blanks, or click blank then click option'

Acontain

Bscale-down

Cfill

Dcover

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'cover' which preserves aspect ratio and crops.

Using 'contain' which preserves aspect ratio and fits inside.

The object-fill class stretches the image to fill the container, ignoring aspect ratio.

4fill in blank

hard

Fill both blanks to create an image that is centered and does not stretch using Tailwind CSS.

Tailwind

<img src="avatar.jpg" alt="Avatar" class="object-[1] object-[2] w-32 h-32 rounded-full" />

Drag options to blanks, or click blank then click option'

Acenter

Bcontain

Ccover

Dfill

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'cover' which crops the image.

Using 'fill' which stretches the image.

The object-center class centers the image inside the container, and object-contain fits the image without stretching.

5fill in blank

hard

Fill all three blanks to create a responsive image that covers the container, is centered, and has rounded corners using Tailwind CSS.

Tailwind

<img src="landscape.jpg" alt="Landscape" class="object-[1] object-[2] rounded-[3] w-full h-64" />

Drag options to blanks, or click blank then click option'

Acontain

Bcenter

Clg

Dcover

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'contain' which fits but may leave empty space.

Forgetting to center the image.

Using no rounding or too small rounding.

object-cover makes the image cover the container, object-center centers it, and rounded-lg adds medium rounded corners.