What does object-fit: cover do on an with set width and height?

Keeps proportions and fills the whole box, cropping the excess

Stretches the image exactly to the box size, distorting its proportions

Fits the whole image while keeping proportions, leaving empty bars

HTML & CSS · Middle · Question 24 of 75

What does `object-fit: cover` do on an `<img>` with set `width` and `height`?

1Stretches the image exactly to the box size, distorting its proportions
✓Correct answer: Keeps proportions and fills the whole box, cropping the excess
3Fits the whole image while keeping proportions, leaving empty bars

Explanation

cover fills the entire area, keeps the proportions and crops what sticks out (the focal point is set with object-position). Fitting the whole image with bars is contain. Distorting proportions is the default behavior (fill).

What does `object-fit: cover` do on an `<img>` with set `width` and `height`?

Explanation

Further reading

Problem with a question

Test yourself

What does object-fit: cover do on an <img> with set width and height?

Explanation

Further reading

Test yourself

What does `object-fit: cover` do on an `<img>` with set `width` and `height`?