Question

我在网站上使用幻灯片显示。我需要显示两种图像格式，一种是横向（400/300），另一种是肖像（300/400）（比例为4/3）。

我希望幻灯片显示响应，但最大高度。当图像是lanscape，全宽，当图像是portait max-height和width auto。

这是我的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％宽度，这正是我＆＃ 39;我试图避免...

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

Answer 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>

幻灯片放大2幅图像（横向和纵向）

2 个答案: