背景仅限于视口宽度

Question

背景仅限于视口宽度

htmlcsswidth

8

令人困扰的问题！

当我放大我的视口窗口（在Firefox，chrome中发生），然后水平向右滚动时，我的背景图像被裁剪了。

下面的图像最能说明问题：

放大

- 图像的宽度仅为视口大小

缩小 - 问题消失

缩小-问题消失

以下是可能与此相关的CSS部分：

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body{ width: 100%; }
header#header { width: 100%; }
header#header #background-image {
  height: 150px;
  background: url(/images/header/silhouette.png) repeat-x;
}

这种情况即使应用了css渐变也会发生 - 我真的很困惑

- stephenmurdoch

2

你尝试将#background-image的宽度设置为100%了吗？ - stecb

2

我从未见过header或类似figcaption的东西作为HTML元素，就像body或div一样...那样能正常工作吗？它不是类或ID引用，但也许我错过了什么。我只是从未在CSS样式中看到过这样的做法。 - Jakub

2

@steweb - 你差不多就成功了，我只需要在body上设置一个最小宽度 - 感谢大家的建议，特别是@JamesM-SiteGen先生给了我一些好的提示，但不幸的是在我来得及感谢他之前，他已经删除了这些提示。 - stephenmurdoch

1

@stephenmurdoch 这是我删除的帖子，我将其与我的另一个答案合并了。 - JamesM-SiteGen

1

@stephenmurdoch 你应该更新整个帖子下的第一张图片，就像现在得到的那样，类似于 **编辑：**\n\n<img...> - JamesM-SiteGen

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- stephenmurdoch · Accepted Answer

解决方法是在body上设置min-width属性:

body{ width:100%;min-width: 1002px; }

这个修复了我所使用的所有浏览器以及 iPhone 上的问题（根据 iphonetester 的说法），尽管我意识到现在最好添加一些媒体查询，以便为手持设备用户提供最佳解决方案。