Categories
autoresize css html image

How do I auto-resize an image to fit a ‘div’ container?

1923

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio?


Example: stackoverflow.com – when an image is inserted onto the editor panel and the image is too large to fit onto the page, the image is automatically resized.

4

  • 1

    Some interesting libraries for doing image resizing to fit the container: * plugins.jquery.com/project/myimgscale * code.google.com/p/jquery-imagefit-plugin

    – Frosty Z

    Jul 13, 2011 at 13:10

  • Aside @Kevin’s answer… You can also use services like ImageBoss to create your images with the size you want, on-demand. Fitting the image on the container is great but serving images responsively is way batter.

    May 24, 2018 at 21:35

  • Posible duplicate: stackoverflow.com/questions/1891857/…

    – jolumg

    Oct 17, 2018 at 10:33

  • @jolumg Not quite; while there’s a lot of overlap in some solutions, there are also many solutions that are not interchangeable, as that one is asking how to scale an image up, whereas this one is asking to scale an image down.

    – TylerH

    Jan 2, 2019 at 15:37

2301

Do not apply an explicit width or height to the image tag. Instead, give it:

max-width:100%;
max-height:100%;

Also, height: auto; if you want to specify a width only.

Example: http://jsfiddle.net/xwrvxser/1/

img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}
Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

3

  • 59

    This will not scale both the height and width.

    – Neil

    Jun 7, 2011 at 3:40

  • 84

    height: auto; if you want to specify a width only

    – Roi

    Sep 10, 2012 at 23:28

  • 1

    Not applying explicit width and height to the image has the side-effect that the page will not reserve space to the image, and the page will flicker or content might jump as the image loads.

    Aug 18, 2021 at 17:02


622

It turns out there’s another way to do this: object-fit.

<img style="height: 100%; width: 100%; object-fit: contain"/>

will do the work. Don’t forget to include other necessary attributes like src and alt, of course.

Fiddle: http://jsfiddle.net/mbHB4/7364/

2

  • 62

    This will scale the image to fit the larger dimension completely within the container, so the smaller dimension may not cover it completely. To crop the larger dimension instead, use object-fit: cover

    Oct 20, 2015 at 17:08

  • object-fit: cover worked for me, but now sure why ??

    – vikramvi

    Jul 27 at 5:40

117

Currently there is no way to do this correctly in a deterministic way, with fixed-size images such as JPEGs or PNG files.

To resize an image proportionally, you have to set either the height or width to “100%”, but not both. If you set both to “100%”, your image will be stretched.

Choosing whether to do height or width depends on your image and container dimensions:

  1. If your image and container are both “portrait shaped” or both “landscape shaped” (taller than they are wide, or wider than they are tall, respectively), then it doesn’t matter which of height or width are “%100”.
  2. If your image is portrait, and your container is landscape, you must set height="100%" on the image.
  3. If your image is landscape, and your container is portrait, you must set width="100%" on the image.

If your image is an SVG, which is a variable-sized vector image format, you can have the expansion to fit the container happen automatically.

You just have to ensure that the SVG file has none of these properties set in the <svg> tag:

height
width
viewbox

Most vector drawing programs out there will set these properties when exporting an SVG file, so you will have to manually edit your file every time you export, or write a script to do it.

0