How to auto-resize an image to fit a div element

When an image is added to the HTML page, it may not be positioned correctly inside of the parent container. For example, the most common case is when the image is larger than the DIV element.

As a result, you may see other regular content overlapped by the picture data. Or even worse, in some cases images may not fit into the browser window.

There are different methods that you can use to solve such an issue. In this article, we describe very simple CSS solutions that you can integrate into any web application or site. For more information please review the following sections.

Using max-width and max-height properties

Let's assume that there is a parent DIV container inside of the HTML code and it has a square class. Then, width of this container is predefined, as like it's shown in the following sample.

.square {
    width: 300px;
}

Now, we are going to define the picture class that will be applied to the IMG tag. After that, in the code, we have to add max-width and max-height properties which are set to the 100% value.

This instructs the browser to fit the element into the outer container by width and height. It means that the image will not be larger than the size of the parent element.

However, there are other very important CSS rules that need to be added. We also have to set the auto value to the width and height properties. That is needed to maintain the aspect ratio of the image. For example, if the image fits the container by width, then the height is going to be auto-calculated. And the opposite case, if the image takes 100% of height, like in portrait mode, then the width will be calculated according to the ratio of the source image.

Following is the source code that demonstrates such a functionality.

.picture {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

Also, please see the HTML code that is implemented according to the described pattern.

<div class="square">
    <img class="picture" alt="" src="/preview/images/apple.jpg">
</div>

Finally, the following is a preview of this method of positioning an image inside of a DIV container.

object-fit property

Previous method allows you to control how the actual HTML container is resized. However, there is an alternative solution that gives you the ability to change positioning of image data inside of the IMG tag.

When you don't know the size of the source image or if the size of the container may change at runtime, then the object-fit property may help. It specifies how the image data is positioned inside of the IMG or VIDEO tags.

Please see the example below, the image is in cover mode. It means that the aspect ratio is kept and image data fills the whole container. The remaining invisible part of the image is truncated.

.picture {
    width: 300px;
    height: 300px;
    object-fit: cover;
}

The usage is very simple, you just have to add a class to the desired HTML tag.

<img class="picture" alt="" src="/preview/images/apple.jpg">

Now, you can see how such a method looks in a browser.

The opposite option is the contain value. If it's set, the image will fit into the IMG but keeping the original aspect ratio. However, If the aspect ratio doesn't match the ratio of container, then you may see empty areas either on left and right or top and bottom sides.

Please see the following sample that demonstrates how to apply such a value to the object-fit property.

.picture {
    background: #eeeeee;
    width: 300px;
    height: 300px;
    object-fit: contain;
}

The usage of the given class is shown below:

<img class="picture" alt="" src="/preview/images/apple.jpg">

Also, below you can see a preview of how the image looks in the contain mode.

It is worth mentioning that there are other possible CSS values that can be assigned to the object-fit CSS property. Please see additional options below:

fill - The picture will fill the whole IMG or VIDEO container and the aspect ratio will not be kept.

scale-down - This option should be used if you want the image to be scaled down. The resulting area is the smallest of either none or contain options.

none - If this option is set, then the picture data will not be upsized or downsized.

Now, as you have configured how the image is filled into the container, you may also want to change the positioning. The object-position property can be used for that purpose.

The usage is very simple, you just have to set the position of the content within the container. See some examples below.

object-position: 10% 10%;

Also, the pixel values can be used to change positioning:

object-position: 10px 10px;

Or even you can use the keyword values, as like it is shown in the following example:

object-position: top left;

CSS background property

Let's imagine a situation when you are adding a DIV container to the HTML page and also want to apply a background to it. There is also a method of auto-resizing an image that may help in such a case.

The CSS language provides the background-size property that allows you to configure how the image data can be placed inside the container.

The cover mode may be used if the image should fill all the container while keeping the aspect ratio. Please see our example of the code below.

.picture {
    width: 300px;
    height: 300px;
    background-image: url("/preview/images/apple.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

The usage is simple, you just have to apply picture class to the DIV container. See it below.

<div class="picture"></div>

The preview of such a method is given below.

It's possible to use the contain mode as well. If it's set for the background-size property, then the image will be scaled down to fit the container. Also, the image aspect ratio will be kept.

Please how it should be used in our sample:

.picture {
    background: #eeeeee;
    width: 300px;
    height: 300px;
    background-image: url("/preview/images/apple.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Now you can simply add the picture class to the DIV element and the background will be rendered accordingly to the given options.

<div class="picture"></div>

The preview is given below.

Conclusion

That's a popular case in web development when an image is not fitting into the specific HTML container. However, there are various methods that you can use in your code in order to solve such an issue.

This article lists the most widely used techniques, which are convenient and easy to use. You may choose the solution that is the most appropriate in the specific case.