Object fit in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS property object-fit do?

It controls how an image or video fits inside its container, deciding if it should stretch, cover, or contain within the box without distortion.

beginner

Name the five main values of object-fit.

• fill
• contain
• cover
• none
• scale-down

intermediate

What is the difference between object-fit: contain and object-fit: cover?

contain fits the entire image inside the container without cropping, keeping aspect ratio but may leave empty space.<br>cover fills the container completely, cropping parts if needed but keeps aspect ratio.

beginner

Which object-fit value stretches the image to fill the container, possibly distorting it?

fill stretches the image to fill the container's width and height, ignoring the original aspect ratio, which can distort the image.

intermediate

How does object-fit: scale-down behave?

It compares none and contain and uses the smaller size. So the image is shown at its original size or scaled down to fit inside the container without cropping.

Which object-fit value keeps the entire image visible without cropping but may leave empty space?

A fill

B contain

C cover

D none

contain fits the whole image inside the container, preserving aspect ratio and showing all parts, but may leave empty space.

What happens when you use object-fit: fill on an image?

A Image stretches to fill container, possibly distorted

B Image keeps aspect ratio and fits inside container

C Image is cropped to fill container

D Image is shown at original size

fill stretches the image to fill the container's width and height, ignoring aspect ratio, which can distort the image.

Which object-fit value shows the image at its original size without scaling?

A contain

B cover

C scale-down

D none

none displays the image at its original size, ignoring the container size.

If you want an image to fill the container completely but keep its aspect ratio, which object-fit value should you use?

A fill

B contain

C cover

D none

cover fills the container fully, cropping if needed, while keeping the image's aspect ratio.

What does object-fit: scale-down do?

A Shows image at original size or smaller to fit container

B Always scales image up to fill container

C Crops image to container size

D Stretches image ignoring aspect ratio

scale-down shows the image at original size or scales it down to fit inside the container, whichever is smaller.

Explain how object-fit helps control image display inside containers and why it is useful.

Think about how images behave when container sizes change.

Describe the visual difference between object-fit: contain and object-fit: cover with an example.

Imagine fitting a photo inside a frame.