保持宽高比的响应式背景

Question

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

也许解决方案是 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，请看一下// NEW!!与the old one的区别。