3

我已经搜索了几个小时，现在我想是时候问这个问题了。我无法让放置在标题中的背景图像适合屏幕。它适用于各种计算机分辨率，但我遇到麻烦的是当我在手机上查看时，它不想缩小。我已经完成了最小高度，最大高度，我已经尝试了所有方法，我认为部分问题是标题 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

提前谢谢你的帮助！

邓肯比蒂给了我答案，它就像一个魅力。这是他说的：

“你有背景尺寸：封面，它使背景图像的高度适合你的 div 的固定高度，209px。删除固定高度并替换为 padding-bottom:15% 这将保持 div 的纵横比相同并随着视口变小缩放图像。”

4

4 回答 4

3

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

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

于 2013-05-17T15:59:04.020 回答
1

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

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

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

演示小提琴

全屏

于 2013-05-17T16:02:21.900 回答
0

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

那么将图像高度设置为 div 的 100%？

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

于 2013-05-17T15:55:59.740 回答
0

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

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

img {
    max-width: 100%;
}
于 2013-05-17T15:59:21.610 回答