css - How to scale images to the size of an existing div while you change them dynamically with onClick? -

what trying following.

1. i have list of hidden images.
2. i have button activated jquery onclick replaces html of div include images
3. the button functions cycle button , gets big list of images.

my problem images not scale size of parent div. if give them .horizontal , .vertical class ideas?

i want keep format of hidden list of images inside div because other things lists. thought having 2 classes images work , finishing realised whole idea has problem !

http://jsfiddle.net/alexnode/ttqht/

html     <div id="artdiv2">         <div id="artslide1nextbutton">></div>         <div id="artslide1"></div>     </div>     <div class="hidden">     <div id="1slide1">         <img class="horizontal" src="http://farm8.staticflickr.com/7366/9160515864_7dc851a598.jpg"  alt="rezando los antiguos dioses - praying old gods">     </div>     <div id="1slide2">         <img class="vertical" src="http://farm6.staticflickr.com/5519/9158661396_4828a06655.jpg"  alt="drain">     </div>         </div>  jquery //i called 1slide that.  var artslides = $('[id^=1slide]'); idxs1 = 1; //this button cycles through image  $("#artslide1nextbutton").on(     "click", function () {     $("#artslide1").html(artslides.eq(idxs1).html());     idxs1 = idxs1 == 1? 0 : idxs1 + 1; });  css .hidden{display:none;} #artdiv2{ position:absolute;  top:8%; left: 20%; height:70%; width:100%; background:dimgray;} #artslide1nextbutton{position:fixed;  top:0px; left: 0px; height:auto; width:10%; background:darkred;pointer:cursor;} .horizontal {position:relative; width:100%; height:auto;} .vertical {position:relative; height:100%; width:auto;}  

edit : answer updated fit closer question.:

you play width min , max value , center img text-align:center.

demo http://jsfiddle.net/ttqht/2/

    #artslide1 {         width:100%;         overflow:hidden;         height:100%;         text-align:center;     } #artslide1 img {     min-height:100%;     max-width:100%;  } 

some other option play image

here idea of happens if can set line-height. http://codepen.io/gcyrillus/pen/bdtej , adding min-width/min-height http://codepen.io/anon/pen/kfibp