jquery - 具有 2 种图像尺寸(横向和纵向)的幻灯片

Question

我在我的网站上使用幻灯片。 我需要显示两种类型的图像格式，一种是横向 (400/300)，另一种是纵向 (300/400)(比率 4/3)。

我希望幻灯片能够响应，但具有最大高度。当图像为横向时，全宽，当图像为纵向时，最大高度和宽度自动。

这是我的 CSS:

.cycle-slideshow {
    width:100%;
    height:auto;
    max-height:300px;
}

.cycle-slideshow {
    content: "";
    display: block;
    clear: both;
}
.cycle-slideshow img {
    width:100%;height:auto;
}

我的 HTML:

<div id="custom-pager"></div>

        <div class="cycle-slideshow" 
    data-cycle-fx=fade
    data-cycle-timeout=0
    data-cycle-auto-height=container
    data-cycle-pager="#custom-pager"
    data-cycle-pager-template="<a href=#> {{slideNum}} </a>"

    >
    <img src="http://uploads.siteduzero.com/files/6001_7000/6410.jpg">
    <img src="http://www.williamcronon.net/researching/photoimages/932_photographic_images_fig01_lowres.jpg">
    <img src="http://www.jesuites.com/v3/wp-content/uploads/2011/09/montagnes_rocheuses.jpg?9d7bd4">
    <img src="http://www.2tout2rien.fr/wp-content/uploads/2013/12/images-les-plus-vues-de-2013-google-trends-27.jpg">
</div>

这是一个 JSFiddle，http://jsfiddle.net/zyhrK/73/您可以在此示例中看到纵向格式的图像 3 和 4 太高并拉伸(stretch)到 100% 宽度，这正是我要避免的...

Answer 1

您始终可以创建一个类 .landscape 和一个类 .portrait 来指定确切的高度和宽度。否则使用容器的大小来保持图像 3:4 的比例，不要触摸图像样式。我所做的只是改变:

.cycle-slideshow {
    width:100%;
    height:auto;
    max-height:300px;
}

.cycle-slideshow {
    content: "";
    display: block;
    clear: both;
}
.cycle-slideshow img {
    width:100%;height:auto;
} 

收件人:

.cycle-slideshow {
    max-height:300px;
    text-align:center;
    clear: both;
}

看起来 1 和 2 都保持 400 x 300，3 和 4 保持 300 x 400