如何显示全高背景图片？

Posted 2021-03-27

我有一个照片类型（不是风景）背景图像，宽度为979像素，高度为1200像素。我想将它设置为向左浮动并显示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;
}

答案

您可以使用您拥有的代码执行此操作，您只需确保将html和body设置为100％高度。

但是：ぁzxswい

http://jsfiddle.net/kevinPHPkevin/a7eGN/

另一答案

CSS可以使用background-size：cover;

但要更详细并支持更多浏览器......

使用像这样的宽高比：

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;
}

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

另一答案

FIDDLE