Apply Aspect Ratio Sizing to Images with CSS object-fit

Share this video with your friends

Send Tweet

The CSS property object-fit instructs an img to act as the container for its own contents. We can then use the value cover to have the image content behave similar to a background-image by scaling up or down to fit the provided dimensions. If the goal is for the image contents to remain fully visible within a container while maintaining its aspect ratio, we can use the value scale-down.

This lesson is a Community Resource

A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.