image size in ratio with div size without any stretch - html

Question

Lets say I have a div of heigh 400px and width 400px.
<div style="width:400px; height:400px; background:#CCC;" align="center">
<img src="/static/{{media_info.media_file}}" />
</div>
Now if I have a image of height 350 and width 200 px I want it to be adjusted in this div. I mean it adjust inside the div being child to the div. It should not fit to the div neither stretch. Just fit in the center.
Like div should be taken as 100% and image should be in its ratio.
Remaining 50 px in height and 200 px in width should be left. like buttom and top leaving 25 25 px and left and right leaving 100 100 px.
Also if the image is of say width 800px and height 700 px same way the div height and width should be considered as 100 percent and the image should lie in the middle without any stretch
I am not a front end developer :(

Answer 1

So you want the image to be centered inside the div, in its original size, and any overflow simply cut of when the image is larger than the div in any dimension?
Well you could just set it as a centered background-image, instead of using in actual img element.
If that’s not an option, position it absolutely – -50% from either “side” (top, left, right and bottom), and use margin:auto to center it:
div { position:relative; width:400px; height:400px; margin:10px; background:#ccc;
overflow:hidden; }
div img { position:absolute; top:-50%; left:-50%; right:-50%;
bottom:-50%; margin:auto; }
<div id="div1"><img src="http://placehold.it/350x250/ff9999/000000"></div>
<div id="div2"><img src="http://placehold.it/800x700/ff9999/000000"></div>

Answer 2

You can achieve this using transform property of css.
Here is the fiddle
div {
position: relative;
}
img {
display: block;
margin:0 auto;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Answer 3

Note, I cleaned up the inline styles, just to make it clear.
http://jsfiddle.net/s4ja2q1z/4/
div {
width: 400px;
height: 400px;
background: lime;
text-align: center;
position: relative;
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
position: absolute;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
EDIT: Added fixes if the image is taller than the container.

Answer 4

Try putting max-width and max-height on the image:
<img style="max-width: 100%;max-height: 100%;" src="/static/{{media_info.media_file}}" />
This will keep the image dimensions limited to a maximum width and height of the parent container (aka 400px in this case) and it will scale down if you ever change your parent div's dimensions without changing any ratios that would cause stretching.

Answer 5

You can do it this way too by using the table-cell property.
http://codepen.io/Edrees21/pen/XJoEmp
<div class="container">
<img src="http://placehold.it/350x200/aEEAEE" />
</div>
.container {
width: 400px;
height: 400px;
text-align: center;
background-color: #cccccc;
vertical-align: middle;
display: table-cell;
}

Answer 6

I would set the image as a background of your div and then change the size of it using background-size: contain.
This will make your image not be distorted, but still fill the entire div.
<div style="width:400px; height:400px; background-image:url("image.jpeg"); background-repeat:no-repeat; background-size: contain; background-position: center;">
</div>

Answer 7

div {
text-align: center;
}
img {
max-width: 400px;
max-height: 400px;
vertical-align: middle;
}