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

lets have div of heigh 400px , width 400px.

<div style="width:400px; height:400px; background:#ccc;" align="center"> <img src="/static/{{media_info.media_file}}" /> </div> 

now if have image of height 350 , width 200 px want adjusted in div. mean adjust inside div being child div. should not fit div neither stretch. fit in center.

like div should taken 100% , image should in ratio.

remaining 50 px in height , 200 px in width should left. buttom , top leaving 25 25 px , left , right leaving 100 100 px.

also if image of width 800px , height 700 px same way div height , width should considered 100 percent , image should lie in middle without stretch

i not front end developer :(

so want image centered inside div, in original size, , overflow cut of when image larger div in dimension?

well set centered background-image, instead of using in actual img element.

if that’s not option, position absolutely – -50% either “side” (top, left, right , bottom), , use margin:auto 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>