响应背景，保持宽高比

Question

我正在使用Malsup的Cycle 2在单独的div中创建一个带有相应滑动文本的背景幻灯片。我这里有一些简单的标记，但似乎无法将图像裁剪掉，因此它总是100％的浏览器高度（如果你做一个薄窗口，你会看到底部的红色）。 / p>

也许解决方案是jQuery或CSS - 我看到的一切建议在图像和父div上使用height:auto，但无济于事。

jsfiddle

<div id="background" class="cycle-slideshow" 
                     data-cycle-fx="scrollHorz" 
                     data-cycle-timeout="2000"
                     data-cycle-slides="> div"
>
    <div style="background:#fcc">
        <img src="http://stoptraining.me/staged/IMG_1402.jpg">
    </div>
    <div style="background:#cfc">
        <img src="http://stoptraining.me/staged/IMG_1403.jpg">
    </div>
</div>

<div class="center">
    <div id="text" class="cycle-slideshow" 
                   data-cycle-fx="fade" 
                   data-cycle-timeout="2000"
                   data-cycle-slides="> div"
    >
        <div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor ...</p>
        </div>
        <div>
            <p>Mel eu pertinax ...
        </div>
        <div>
            <p>Utinam electram pertinacia ...
        </div>
    </div>
</div>

CSS：

body, html {
    background: red;
    padding: 0;
    margin: 0;
    height: auto;
    width: 100%;
}
#background {
    position: fixed;
    width: 100%;
    height: auto;
    z-index: 99;
    overflow: hidden;
}
#background div {
    width: 100%;
    height: auto;
    background-size: cover;
    overflow: hidden;
}
#background div img {
}
img {
    width: 100%;
    height: auto;
}
#text {
    position: relative;
    text-align: center;
    z-index: 99;
}
.center {
    background: white;
    padding: 200px 0 0 0;
    width: 400px;
    overflow: auto;
    min-height: 1000px;
    margin: auto;
    z-index: 9999;
    position: relative;
    text-align: center;
}

Answer 1

目前没有CSS样式可以帮助任何元素根据哪一方面保持其宽高比;因此，您将不得不求助于使用JavaScript。

这是一个有效的jsFiddle，可以完成您想要的工作。

---

上述解决方案包含一些原始修改......

CSS：

删除：

#background div img {
}
img{
    width: 100%;
    height: auto;
}

更改：

#background {
    /* ... */
    /* make sure width and height are 100%! */
    width: 100%;
    height: 100%;
    /* ... */
}
#background div {
    /* ... */
    /* make sure width and height are 100%! */
    width: 100%;
    height: 100%;
    /* ... */
}

添加

#background div img.wider {
    width: 100%;
    height: auto;
}
#background div img.higher {
    width: auto;
    height: 100%;
}

的 JavaScript的：

var imgWidth = 1600;
var imgHeight = 1067;
var imgRatio = imgWidth / imgHeight;

$(ResizeBackground); // call on initialize
$(window).resize(ResizeBackground); // and on resize

function ResizeBackground() {
    var div = $('#background');
    var divWidth = div.width();
    var divHeight = div.height();

    // if the div's ratio is higher than the image, it means that
    // the div is wider than the image (and the background will be seen on the sides).
    // Else, the div is higher and will display the background on the bottom.

    // this condition will change the images proportion to always fill the background.
    if (divWidth / divHeight > imgRatio) {
        div.find('img').removeClass('higher').addClass('wider');
    } else {
        div.find('img').removeClass('wider').addClass('higher');
    }
}

---

的更新

为了使图像居中，而按比例调整尺寸，则必须使用以下计算：

var $imgs = div.find('img');

if (divRatio > imgRatio) {
    $imgs.each(function () {
        var $this = $(this);
        // set a negative top margin (and move the image up)
        $this.css('margin-top', -Math.abs(div.height() - $this.outerHeight()) / 2);
    });
} else {
    $imgs.each(function () {
        var $this = $(this);
        // set a negative left margin (and move the image to the left)
        $this.css('margin-left', -Math.abs(div.width() - $this.outerWidth()) / 2);
    });
}

我稍微更新了jsFiddle，请看一下，看看the old one中标有// NEW!!的差异。