javascript - How to size images loaded from other users such that dimensions are maintained yet a max width and height are set with css? (HTML/JS/CSS) -

i want know how, within div element, can load image api (where user may post whatever size image want) , can format image meet following requirements css.
1) original dimensions maintained

2) given max width , max height specify, attribute of image out of control differs greatest corresponding attribute in specification shrunk down match it, other attribute shrinking maintain dimension. if image in fact smaller on both dimensions specifications dimension of image differs least corresponding specification should grow match it, other 1 again moving maintain dimension.

3) image should center in it's parent node depending on whether width or height specification not maxed out (ie: if max_width 200px , images width 180 should center along x axis).

i suppose js, imagine common enough desire there easier way logically inputting it. (also how js can access height , width attributes of user uploaded images coming in json file, , how in js can center image within it's parent node?):

js/pseudo code mix looks this, want know how in css if possible:

var body = document.getelementsbytagname('body')[0]; $(document).ready(function(){     var maxheight = whateeverwespecify;     var maxwidth = whateverwespecify;     $.getjson('jsonfilewithpropertyimagepointingtouseruploadedimage', formatimg);   }); function formatimg(json){  var div  document.createelement('div');  var img = document.createelement('img');  img.setattribute('src', json.image);  **//this part   dont know how read dimensions of** incoming image ill use img.height , width.height refer dimensions of incoming json img here   var heightdifference = img.height - maxheight;  var widthdifference = img.width - maxwidth;  if (widthdifference < 0 && heightdifference < 0){    if (heightdifference < widthdifference){      img.style.height = img.height + heightdifference;    }     else{      img.style.width = img.width + widthdifference;    }  }  else{   if (heightdifference > widthdifference){     img.style.height = img.height - heightdifference   }   else{     img.style.width = img.width - widthdifference   }   /*sizes adjusted fit specifications @ point.  have no idea    how center image along y or x axis depending on 1    required other can determine change based on    attributes difference specification greater 0 (in    essence, attribute updated), if me    future reference appreciate */  } } 

try setting div 'background-image' property, , use 'background-size:contain'.

i had same kind of problem when trying handle profile pictures in dating website building. never know if user gonna upload tall or wide picture.

html:

<div class="outer">   <div class="image_container"></div> </div> 

css:

.outer {     background:lightgray;     width:800px;     height:500px; } .image_container {     position:relative;     height:80%;     width:80%;     left:10%;     top:10%;     background-image:url('http://icatcare.org/sites/default/files/kcfinder/images/images/aggressive-cat_0.jpg');     background-repeat:no-repeat;     background-size:contain;     background-color:darkgray;     background-position:center; } 

here's codepen. un-comment second background-image line see how works tall image: centered background image.

i put darker grey background on inner div show div stays @ proportions set, css handles images of varying sizes within. solution @ least keeps layout floating or wrapping oddly based on changing image sizes.