css - 如何使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 的视口(viewport)，您会看到图像没有填满预览面板的高度。

谢谢!

Answer 1

我不知道有什么方法可以单独在 CSS 中执行此操作。

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

但是，只需一点点 js，您就可以很容易地在这两个选项之间切换，这应该可以满足您的需求。

水平拉伸(stretch) + 垂直居中:

.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*/
}

垂直拉伸(stretch) + 水平居中:

.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<=8.

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