jquery - How to fit child div inside parent div by any parallel sides, maintaining the ratio on resizeing? -

jquery - How to fit child div inside parent div by any parallel sides, maintaining the ratio on resizeing? -

so,the kid div contain image , need stretched side on vertical or on horizontal, depending on height or width(the images not have same height or width). works great if utilize zoom property or vw,vh(as see in jsfiddle), problem not supported browsers(will mobile website). hope jsfiddle explan improve need if not inquire , explain better.

.box { position: absolute; width: 70%; height: 61.6%; background-color: #ececec; margin: auto; top: 0;bottom: 0;left: 0;right: 0;}

'content' div div wrap image http://jsfiddle.net/s8lmu6w5/

ps: can utilize js/jquery. becouse think tried 99% of html/css combinations.... thanks!

with <img> element can utilize max-height: 100% , max-width: 100%. finish width of 100% never reached, , finish height of 100% never reached, ratio remains 1:1

working example

note image positioning in regards viewport , not it's parents in example. remove divs if wanted , have same result.

compatibility: using technique centre image vertically requires max-height px length (not percentage) image centered in ie8.

class="snippet-code-css lang-css prettyprint-override">.box { position: absolute; width: 70%; height: 61.6%; background-color: #ececec; margin: auto; top: 0; bottom: 0; left: 0; right: 0; } .content img { margin: auto; position: absolute; max-height: 100%; max-width: 100%; top: 0; right: 0; bottom: 0; left: 0; } class="snippet-code-html lang-html prettyprint-override"><div class='box'> <div class='content'> <img src="http://www.placehold.it/800x500" /> </div> </div>

jquery html css