CSS AdvancedLesson 67Free preview

CSS object-fit

This lesson is part of CSS · All levels

Summary

`object-fit` governs how the contents of fixed-sized elements, such as `<img>` or `<video>`, adjust the boxes. The value of `cover` stretches the image to cover the box and cut the ribbon, while `contain` maintains the entire image content with the remainder of the space blank. This feature is very helpful when creating a photo card of uniform size.

Key points

This property applies to elements with clear reference boxes such as `<img>` with `width`/`height`
`fill` (default) stretching the image ignoring aspect ratio
Cover the box, the edge of the picture can be cut.
It displays the entire image content, leaving room for the blank.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.