无法让背景标题图像适合宽度.. 尝试了一切

Question

我已经搜索了几个小时，现在我想是时候问这个问题了。我无法让放置在标题中的背景图像适合屏幕。它适用于各种计算机分辨率，但我遇到麻烦的是当我在手机上查看时，它不想缩小。我已经完成了最小高度，最大高度，我已经尝试了所有方法，我认为部分问题是标题 div 本身比这张图片小，但我也不太了解，需要一些指导，我m 在 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 给了我答案，它就像一个魅力。他是这样说的：

"你有 background-size: 适合高度的封面 背景图像到 div 的固定高度，209px。除掉 固定高度并替换为 padding-bottom:15% 这将保持 div 的纵横比相同，并在视口中缩放图像 更小。”

Answer 1

我建议在您的 HTML 中使用标题图像而不是背景图像，然后像这样设置 max-width：

#header img{
    max-width: 100%;
    height: auto;
}

这也将允许您使图像“可点击”，这通常需要在标题徽标中。

DEMO FIDDLE

FULLSCREEN

Answer 2

硬编码的高度值把你弄乱了。尝试使用height: 290px 值并观察标题是否适合较小的屏幕。

您可以尝试将图像放在 html 中并使用 CSS 属性来帮助缩小背景图像，而不是背景图像。

img {
    max-width: 100%;
}

Answer 3

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

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

Answer 4

你是否使用过百分比来设置 div 中图像的高度？

所以将图像高度设置为 div 的 100%？

如果不是，那么也许您可以使用一些 javascript 代码来检测它们是否在移动设备上，并相应地设置它的高度？