具有 2 种图像尺寸（横向和纵向）的幻灯片答案

【问题标题】：Slideshow with 2 images sizes (landscape and portrait)具有 2 种图像尺寸（横向和纵向）的幻灯片
【发布时间】：2014-08-02 00:20:44
【问题描述】：

我在我的网站上使用幻灯片。我需要显示 2 种类型的图像格式，一种是横向 (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 太高并拉伸到 100% 宽度，这正是我要避免的。 .

【问题讨论】：

标签： jquery css image-size

【解决方案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

【讨论】：

感谢您的回复，但现在我的幻灯片不再响应...有什么想法吗？
我使用了您发送给我的jsfiddle.net/zyhrK/73 链接，只需将.cycle-slideshow{ 代码复制并粘贴到之前的代码上，它就可以正常工作了。您是否更改了代码中的其他任何内容？

【解决方案2】：

好的，所以我认为这应该可以满足您的需求：

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

.cycle-slideshow img {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    /* If you want the images centred then you will need the below css too */ 
    position: absolute !important;
    top: 0px;
    left:0px;
    bottom: 0px;
    right: 0px;
    margin: auto;
}

和 html 相同，但没有 data-cycle-auto-height 属性：

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

        <div class="cycle-slideshow" 
    data-cycle-fx=fade
    data-cycle-timeout=0
    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>

【讨论】：