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给了我答案，它就像一个魅力。以下是他所说的：

“你有背景尺寸：盖子适合的高度背景图像到div的固定高度，209px。除掉固定高度，并用填充底部替换：15％这将是kep div的宽高比相同，并将视图缩放为视口较小的“。

Answer 1

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

删除固定高度并替换为padding-bottom:15%这将使div的纵横比相同，并在视口变小时缩放图像。

Answer 2

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

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

这样您还可以使图像“可点击”，这在标题徽标中通常是需要的。

DEMO FIDDLE

FULLSCREEN

Answer 3

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

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

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

Answer 4

硬编码的高度值让你烦恼不已。尝试使用height: 290px值进行播放，并在较小的屏幕上正确观看标题。

您可以尝试将图片放在html中并使用CSS属性来帮助内容缩小到较小的屏幕上，而不是背景图片。

img {
    max-width: 100%;
}

无法获得背景标题图像以适应宽度..尝试了一切

4 个答案: