Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get CSS content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Control Image Aspect Ratio Using CSS

2:14 CSS lesson by

Resize images and videos to fill their parent and maintain their aspect ratio with pure CSS. The new object-fit and object-position properties allow you to scale images and videos, much like you could with background-size and background-position.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Resize images and videos to fill their parent and maintain their aspect ratio with pure CSS. The new object-fit and object-position properties allow you to scale images and videos, much like you could with background-size and background-position.

Avatar
Aimn

Why is this course too short. PLEEEEASE keep going. I can stay awake for a whole month listening to you.

Avatar
engine2

I'm missing note about that this feature: 'object-fill' is still not supported by Microsoft's browsers. MS Edge status: In Development. http://caniuse.com/#feat=object-fit

I'll start by selecting the img. I'll set its width to 90vw units. I'll set its height to 75vh units.

style.css

img {
    width: 90vw;
    height: 75vh;
}

I'll also add a border, so that we can see its boundaries clearly. Now, let's set object-fit, to its default value of fill. fill is going to stretch the image, regardless of its aspect ratio, to fill the container.

Next, I'll change object-fit to a value of contain. This will increase or decrease the image size to fill the box, but it won't change the aspect ratio. You'll see the empty space here at the top and the bottom of the container, confirming that the aspect ratio of the image itself hasn't changed.

style.css

img {
    width: 90vw;
    height: 75vh;
    border: 3px solid tomato;
    object-fit: contain;
}

Object Fit Contain

Now, I'll change object-fit to a value of cover. This might be the most useful value for object-fit. It tells the image to fill the height and width of its container, and to maintain its aspect ratio.

Object Fit Cover

If necessary, the image will be cropped to fit to the container size, which you can see, when I resize my browser down, you'll see the sides of the image being cut off, but the main part of the image keeps its aspect ratio.

Sides Cut Off

You can also set object-fit to none, which just tells the image to keep its original size.

Object Fit None

The last value we can set to object-fit is scale-down, which will use either none or contain, whichever one outputs the smallest dimensions of the image. Let's set the object-fit value back to cover.

Object Fit Cover

Now, we'll look at object-position. This property works in the same way as background-position, allowing you to move the image around inside of its container.

By default, object-position has a value of 50% 50%, or the exact center of the container. Let's change this to something, like, 20px 10px. This says set the top left of the image to 20px from the left edge of the container, and 10px from the top edge.

Top Left

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?