Question

我正在尝试设置一个带有背景图片的部分，其中包含整个页面的宽度，并根据宽度缩放高度。

我尝试设置background-size: cover，但这没有任何区别 - 背景图片的高度保持为该部分内容的高度。

Answer 1

您可以设置包含，封面和百分比高度

.backgroundCover {
      background-image: url(http://www.messletters.info/animated-backgrounds/71animatedbg.gif);
        background-size: cover;
}

.backgroundContain {
      background-image: url(http://www.messletters.info/animated-backgrounds/71animatedbg.gif);
        background-size: contain;
}
.backgroundPercents{
   background-image: url(http://www.messletters.info/animated-backgrounds/71animatedbg.gif);
        background-size: 100% 100%; 
}

请参阅JSFiddle

Answer 2

您可能需要查看background-size: contain;

引用W3schools，contain达到以下目的：

将图像缩放到最大尺寸，使其宽度和高度都适合内容区域

Answer 3

使用包含

background-size: contain;

此关键字指定应将背景图像缩放到尽可能大，同时确保其尺寸小于或等于背景定位区域的相应尺寸。

Answer 4

试试这个：http://jsfiddle.net/fX5E8/。

HTML：

<div></div>

CSS：

div {
    height: 500px;
    outline: 1px solid red;
    background: url(http://placehold.it/500x200/cccccc&text=Howdy)
                no-repeat
                0% 0%/100%;
}

基于宽度缩放背景图像高度

4 个答案: