jquery - 具有保持纵横比的响应式背景

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稍微，请看一下，看看与 the old one 中用 //NEW!! 标记的差异.