Object fit in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the image cover its container fully.

CSS

img {
  width: 100%;
  height: 200px;
  object-fit: [1];
}

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

Acover

Bnone

Cfill

Dcontain

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using 'none' which does not resize the image.

The cover value makes the image fill the container while keeping its aspect ratio, cropping if needed.

2fill in blank

medium

Complete the code to make the image fit inside the container without cropping.

CSS

img {
  width: 300px;
  height: 150px;
  object-fit: [1];
}

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

Acover

Bscale-down

Ccontain

Dnone

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'cover' which crops the image.

Using 'none' which does not resize the image.

The contain value scales the image to fit inside the container without cropping, preserving aspect ratio.

3fill in blank

hard

Fix the error in the code to properly scale down the image if it is larger than the container.

CSS

img {
  width: 400px;
  height: 300px;
  object-fit: [1];
}

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

Afill

Bscale-down

Cnone

Dcontain

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fill' which distorts the image.

Using 'none' which does not resize the image.

The scale-down value scales the image down to fit inside the container only if it is larger, otherwise it keeps original size.

4fill in blank

hard

Fill both blanks to make the image stretch to fill the container, ignoring aspect ratio.

CSS

img {
  width: 250px;
  height: 250px;
  object-fit: [1];
  object-position: [2];
}

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

Afill

Bcenter

Ccover

Dtop

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'cover' which preserves aspect ratio.

Using 'top' for position when 'center' is better for centering.

fill stretches the image to fill the container ignoring aspect ratio.
center centers the image inside the container.

5fill in blank

hard

Fill all three blanks to create a responsive image that covers the container and aligns to the top right.

CSS

img {
  width: 100%;
  height: 300px;
  object-fit: [1];
  object-position: [2] [3];
}

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

Acover

Btop

Cright

Dcontain

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'contain' which does not fill the container.

Swapping 'top' and 'right' positions.

cover makes the image fill the container while keeping aspect ratio.
top right aligns the image to the top right corner.