Make Image Fit Inside a Container

Previously, we discussed how to embed images using the <img> element. Just like any other block-level element, you can define the image size using width and height.

html

<img
  src="https://images.unsplash.com/photo-1538099130811-745e64318258?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDg2NTA0MDl8&ixlib=rb-4.0.3&q=85"
  alt="Image"
  width="300"
  height="300" />

In this case, we defined the <img> element as a 300x300 box, but the actual image has a different aspect ratio, so it gets squished to fit inside.

This isn't ideal, since in most cases you want the image to keep its original aspect ratio.

Object fit

To solve this problem, you can use the object-fit property to specify how you wish the image to be displayed inside the defined box.

The default option is fill, which means the images will be stretched or squished to fill the entire space, distorting their aspect ratios.

To avoid that, you can set object-fit to contain. The image will shrink to fit inside the box.

css

img {
  border: solid 1px;
  object-fit: contain;
}

Alternatively, you can set object-fit to cover, which works the other way. It will zoom in on the image until it fills the entire box.

css

img {
  border: solid 1px;
  object-fit: cover;
}

Object position

Notice that it doesn't matter if you set object-fit to fill or cover. The browser will always zoom in on the center of that image.

You can change how the image is positioned inside the box using the object-position property.

The property accepts keyword values such as top, bottom, left, and right, as well as combinations of these values such as top left, bottom right, and so on.

You can also micromanage the positioning of the image by specifying either a percentage or a length value.

css

object-position: <horizontal> <vertical>;

object-fit:

object-position:

object-fit: cover;

object-position: center;