html - 根据宽度缩放背景图像高度

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