如何使div中的前景图像占据屏幕的全宽/高度

Question

我需要使图像自动填充查看器屏幕的宽度和高度，同时保持正确的纵横比。最终目标是在页面的背景中显示一个 jquery 幻灯片，同时使其充满屏幕的整个宽度和高度。

这个 jfiddle 显示了我所说的近似值：http://jsfiddle.net/hockey2112/s1d2peqh/1/

这是来自那个 jfiddle 的 CSS：

#slideshow {
    height: auto;
    position: fixed;
    width: 100%;
    z-index: -1;
}
.slide img {
    height: auto;
    width: 100%;
}
.contentbox {
    background-color: #ffffff;
    border:5px solid #000000;
    margin: 0 auto;
    width: 300px;
}

和代码：

<div id="slideshow">
    <div class="slide">
        <img src="http://www.iapics.org/images/3542-wallpaper-landscape-wallpapers-1920x1080.jpg">
    </div>
</div>

<div id="content">
    <div class="contentbox">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

我需要图像首先适合屏幕的高度，然后显示适合屏幕的图像宽度。如果您扩展和收缩该 jfiddle 的视口，您会看到图像没有填满预览面板的高度。

谢谢！

Answer 1

我不知道在 CSS 单独中有一种方法可以做到这一点。

您可以或者将图像水平拉伸到 100% 并垂直居中或您可以垂直拉伸 100% 并水平居中。

不过，只需一点点 js，您就可以很容易地在这两个选项之间切换，这应该会得到您想要的。

水平拉伸+垂直居中：

.slide.horz{
    height:100%;
    width:100%;
}
.slide.horz img {
    width: 100%;
    height:auto;
    display:block;
    margin:auto;
    position:absolute; /*trick for vertical center*/
    top:0;             /*trick for vertical center*/
    bottom:0;          /*trick for vertical center*/
}

垂直拉伸+水平居中：

.slide.vert{
    height:100%;
    width:300%;        /* trick for 'zoomed' horizontal center */
    margin-left:-100%; /* trick for 'zoomed' horizontal center */
}
.slide.vert img {
    height: 100%;
    width:auto;
    display:block;
    margin:auto;
}

然后一些 jquery 会让你根据窗口的纵横比在类之间切换。

$(window).resize(function() {
   setStyle();
});
function setStyle(){ 
    var winRat=($(window).width() +0.0)/($(window).height() + 0.0);
    var imgRat = 1920.0 / 1080.0;
    //do vertical stretching
    if( winRat < imgRat){
        $(".slide").removeClass("horz");
        $(".slide").addClass("vert");
    }else{
    //do horizontal stretching
    $(".slide").removeClass("vert");
        $(".slide").addClass("horz");
    }    
}

仅在最新的 chrome 中对此进行了测试。我有理由相信它可能会闯入 ie

http://jsfiddle.net/s1d2peqh/3/

Answer 2

这就是VH（视口高度）和VW（视口宽度）的用途

body { width:100%;height:100%; }
#slideshow { height: 100vh;position: fixed;width: 100vw;z-index: -1; }
.slide img { height: 100vh;width: 100vw; }