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

Question

我已经搜索了好几个小时，现在我觉得是时候问这个问题了。我不能让我的背景图像放置在我的标题，以适应屏幕。它适用于各种电脑分辨率，但我遇到的问题是，当我在手机上观看时，它不想缩小。我已经做了min-height, max-height，我已经尝试了一切，部分问题我认为是标题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给了我答案，它就像一个魅力。以下是他说的话:

"你有一个background-size: cover来匹配背景图片到你的div的固定高度209px。删除固定高度，并替换填充底部:15%，这将保持div的宽高比相同，并根据视口缩放图像小。"

Answer 1

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

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

Answer 2

我建议在HTML中使用标题图像而不是背景图像，然后设置max-width，如下所示:

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

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

演示小提琴

全屏

Answer 3

您是否使用了a百分比来设置div中图像的高度?

所以设置图像的高度是说100%的div?

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

Answer 4

硬编码的高度值会使您混乱。尝试使用height: 290px值，并观察标题在较小的屏幕上是否合适。

您可以尝试将图像放入html中，并使用CSS属性来帮助内容在较小的屏幕上缩小。

img {
    max-width: 100%;
}