css - 无法让背景标题图片适合宽度.. 什么都试过了

Question

我搜索了好几个小时，现在我想是时候问这个问题了。我无法让放置在页眉中的背景图片适合屏幕。它适用于各种计算机分辨率，但我遇到麻烦的地方是当我在手机上查看时，它不想缩小。我已经完成了最小高度、最大高度，我已经尝试了所有方法，我认为部分问题是标题 div 本身小于此图像，但我也不太了解并需要一些指导，我我对 CSS 场景来说相对较新。

这是我的:

#header {
    background-image: url('http://hamsoc.polymath.io/wp-content/uploads/2013/05/hamsocheader.png');
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 209px;
}

网站网址为 http://hamsoc.polymath.io

提前感谢您的帮助!

Duncan Beattie 给了我答案，而且效果非常好。以下是他所说的:

"You have background-size: cover which is fitting the height of the background image to the fixed height of your div, 209px. remove the fixed height and replace with padding-bottom:15% this will kep the aspect ratio of the div the same and scale the image as viewport gets smaller."

Answer 1

您有 background-size: cover，它使背景图像的高度适合您的 div 的固定高度，209 像素。

移除固定高度并替换为 padding-bottom:15% 这将使 div 的纵横比保持不变，并随着视口(viewport)变小缩放图像。