Setting image without cropping and stretching

Question

I want to set image in img tag, without cropping it or stretching it. That is, the image ratio I have set is 1:1 but image may vary in aspect ratio, so I neither want to change the aspect ratio nor want to crop it vertically or horizontally. my images are changing dynamically.

I have checked multiple solutions for eg: This one which suggests either crop height or width. But I don't want both.

Currently I am at this: HTML:

<div id="container">
    <img id="imgHolder" />
</div>

and CSS

#container{
        height: 100px;
        width: 100px;
        background-color: yellow;
        overflow: hidden;
    }
    #imgHolder{
        height: 100%;
        /* OR width: 100%; */
    }

Help. I prefer CSS only.

possible duplicate of [Image No Stretch or crop](http://stackoverflow.com/questions/13333699/image-no-stretch-or-crop) — Paulie_D, Jan 26 '15 at 16:14
if you don't want both, you can set a max-height and / or max-width — taesu, Jan 26 '15 at 16:16

Fabrizio Calderan · Accepted Answer · 2015-01-26T17:00:24.157

4

you can just set both the max-width and the max-height of your images

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

Doing so the image won't be stretched since your not changing its width or height: whatever is the image size, setting the above properties together ensures that the longest side is reduced to the maximum width (or height) of its parent div, while the other one can freely adapt itself, keeping the original image ratio.

Example http://codepen.io/anon/pen/qEjLZa

Example with centered images (both ver. and hor.): http://codepen.io/anon/pen/NPgege

edited Jan 26 '15 at 17:00

answered Jan 26 '15 at 16:19

Fabrizio Calderan

120,726
26
164
177

remove the height in your code and use this. See the example – Fabrizio Calderan Jan 26 '15 at 16:24
Thank You.. Now a extra query, can I assign it to center? – SurajS Jan 26 '15 at 16:47
I think my second example has anticipated your question :) – Fabrizio Calderan Jan 26 '15 at 16:49
I placed the html code in body and css in script, bt its not working on chrome or Mozilla. but working in JSFiddle or codePen. just help last time. – SurajS Jan 26 '15 at 17:23
without a real example that shows your specific issue I can't tell what's wrong. – Fabrizio Calderan Jan 26 '15 at 17:25
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/69621/discussion-between-surajs-and-fabrizio-calderan). – SurajS Jan 26 '15 at 17:50

score 0 · Answer 2 · answered Jan 26 '15 at 16:21

If you set a height and width on the parent container, it is hard to retain a perfect aspect ratio without stretching or cropping the image. If the image is the same size, 100px x 100px then you could use

CSS

#container{ position: relative; width: 100px; height: 100px; }

img{ 
  position:absolute;
  top:0px;
  bottom:0px;
  right:0px;
  left:0px;
  }

This will set the image to cover the parent container. You could also try

img {
  background: url( yourimage.png) cetner no-repeat;
  background-size: contain;
}

This will set the image to fill the larger of the dimensions to the parent container and will center it. The smaller dimension will not be covered, but it will retain is apsect ratio.

Setting image without cropping and stretching

2 Answers2

Linked