html - How do I auto-resize an image to fit a 'div' container?

ID : 537

viewed : 193

Tags : htmlcssimageautoresizehtml

Top 5 Answer for html - How do I auto-resize an image to fit a 'div' container?

vote vote

95

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>

vote vote

83

object-fit

It turns out there's another way to do this.

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

will do the work. It's CSS 3 stuff.

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

vote vote

77

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.

vote vote

66

Here is a solution that will both vertically and horizontally align your img within a div without any stretching even if the image supplied is too small or too big to fit in the div.

The HTML content:

<div id="myDiv">   <img alt="Client Logo" title="Client Logo" src="Imagelocation" /> </div> 

The CSS content:

#myDiv {   height: 104px;   width: 140px; } #myDiv img {   max-width: 100%;   max-height: 100%;   margin: auto;   display: block; } 

The jQuery part:

var logoHeight = $('#myDiv img').height();     if (logoHeight < 104) {         var margintop = (104 - logoHeight) / 2;         $('#myDiv img').css('margin-top', margintop);     } 
vote vote

51

Make it simple!

Give the container a fixed height and then for the img tag inside it, set width and max-height.

<div style="height: 250px">      <img src="..." alt=" " style="width: 100%;max-height: 100%" /> </div> 

The difference is that you set the width to be 100%, not the max-width.

Top 3 video Explaining html - How do I auto-resize an image to fit a 'div' container?

Related QUESTION?