如何显示全高背景图像？

Question

我有一张照片类型（不是风景）的背景图片，979px宽，1200px高。我想把它设置为向左浮动，并显示100%固定的全图像高度，而不需要向上/向下滚动（无论内容长度如何）。

这是我的CSS代码，但它不工作：

img, media {
    max-width: 100%;
}

body {
    background-color: white;
    background-image: url('../images/bg-image.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

Answer 1

body{
    background-image: url("../images/shape/Online_Do`kon.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    height: 100vh;
}

这将创建完全响应的图像，并显示100%的图像高度，但实际上不包括全屏高度

Answer 2

CSS可以通过背景大小来实现：封面；

但是为了更详细和支持更多浏览器。。。

像这样使用纵横比：

 aspectRatio      = $bg.width() / $bg.height();

不停摆弄

Answer 3

你可以用你拥有的代码来做，你只需要确保html和body设置为100%高度。

演示：http://jsfiddle.net/kevinPHPkevin/a7eGN/

html, body {
    height:100%;
} 

body {
    background-color: white;
    background-image: url('http://www.canvaz.com/portrait/charcoal-1.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}