0

我想要做的是以下。

  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;}
4

3 回答 3

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并添加 min-width/min-height http://codepen.io/anon/pen/kfIbp

于 2013-06-29T17:23:09.047 回答
1

使用 JQuery 变量.height()和.width()

于 2013-06-29T17:29:42.080 回答
0

我在移动设备上，所以我不能自己尝试，但是直接在图像元素上放置宽度和高度属性，然后使用按钮来更改图像源呢？这将使每个图像具有相同的宽度和高度。

于 2013-06-29T17:22:51.923 回答