css - 如何在使用 onClick 动态更改图像时将图像缩放到现有 div 的大小？

Question

我正在尝试做的是以下内容。

1. 我有一个隐藏图片列表。
2. 我有一个用 Jquery onclick 激活的按钮，它替换了 div 的 html 以包含图像
3. 该按钮用作循环按钮并获取大量图像。

我的问题是图像无法缩放到父 div 的大小。即使我给他们一个 .horizo​​ntal 和 .vertical 类有什么想法吗？

我想将隐藏图像列表的格式保留在 div 中，因为我对列表做了一些其他事情。我最初认为通过为图像设置两个类它会起作用，现在我完成了我意识到整个想法有问题!

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 a los antiguos Dioses - Praying to the old Gods">
    </div>
    <div id="1slide2">
        <img class="vertical" src="http://farm6.staticflickr.com/5519/9158661396_4828a06655.jpg"  alt="Drain">
    </div>
        </div>

Jquery
//i get everything called 1slide like that. 
var artslides = $('[id^=1slide]');
idxs1 = 1;
//this is my button that cycles through the 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;} 

Answer 1

编辑:更新答案以更贴近问题。

您可以使用 text-align:center 播放宽度最小值和最大值以及居中 img。

演示 http://jsfiddle.net/ttQHt/2/

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

}

一些其他的图片播放选项

这里是如果你可以设置行高会发生什么的想法。 http://codepen.io/gcyrillus/pen/BdtEj并添加最小宽度/最小高度 http://codepen.io/anon/pen/kfIbp