Scale Images with object-fit

Place Images with object-position

Styling

object-fit puts you in control of img and video aspect ratio.
Images and videos have a source aspect ratios and those ratios can differ from their containers.
object-fit has has values for scaling content to fit the available space of your layouts.



https://app.egghead.io/api/v1/lessons/css-scale-images-with-object-fit/subtitles

Instructor: [0:00] Object-fit is a CSS property that gives us control over the fit of image and video tags, which have a source aspect ratio. Here I have an image that's 400 pixels tall by 200 pixels wide, giving it a 2:4 aspect ratio. We'd like it to be displayed as a square at a 1:1 aspect ratio.

[0:20] To start, set the image height and width to 200 pixels. The image is now square, but its aspect ratio changed as well. It's squished from top to bottom. Object-fit allows us to retain the 2:4 source aspect ratio while making the image square. Add the declaration, object-fit: cover. Now the image covers the available space of this square and crops off the areas of the image that don't fit.

[0:54] This is most often what I want, but there are additional values that we can use. Let's start by changing this from inline styles to a class that I've prepared, class squareImage. This is exactly what we had before, but I've added a background color of fuchsia so that we can better see the different presentations for object-fit values.

[1:17] First is fill. Fill is the initial value of object-fit. We saw this in the beginning, it changes the ratio of the image to fit the container or squishes it to fit the container.

[1:30] Next we have the value contain. Contain retains the original aspect ratio of the source image and fits that image to the specified container size, so we see this letterboxing type of effect.

[1:44] We also have none. None does no resizing whatsoever to the image. We can see its effect by making the square image container both smaller and larger.

[1:55] Making it smaller, we see this zooming type of effect, where we zoom into the image. Making the container larger, we see the addition of padding where the container is bigger than the source image. In both cases, the image is presented in its original aspect ratio and size, indifferent to fit.

[2:14] Finally, we have the value scale-down. Scale-down is a mix of none and contain. Where the container is larger than the source image, no scaling whatsoever is performed, just like none. However, unlike none, if the container is smaller than the source image, the image will shrink to fit.

[2:32] That's it. That's object-fit.

Scale Images with object-fit

Share this video with your friends

Course

Styling