css - 防止水平滚动到主要内容区域之外

Question

所以我有一个页面，其中标题图像可以比内容的宽度更宽。比如说，内容总是 960px 宽，但标题图像可以是 1200px 宽。

因此，为了使标题图像居中，我使用了左侧：+/-50% 技巧。

<div class="page">
  <header>
      <div class="image"><img /></div>
  </header>
  <article>lots of text...</article>
<div>

div.page {
  width: 200px;
  background: blue;
  margin: 0 auto;
  height: 400px;
}

header {
  height: 75px;
}

div.image {
      position: absolute;
  left: 50%;
  border: 1px red solid;
}

img {
  position: relative;
  left: -50%;
  height: 50px;
  width: 500px;
  background: green;
}

article {
  background: yellow;
}

因此，在这个小提琴http://jsfiddle.net/P7F7j/中，您可以看到水平滚动条显示因为div.image不在屏幕上，如果不在屏幕上也会发生同样的情况img。有没有办法从流程中删除这些元素，以免它们触发水平滚动？

Answer 1

制作标题min-width: 960px; width: 100%;并将图像设置为background-image带有样式no-repeat center top

这样，标题将始终至少为 960 像素，并且将填充您的图像。溢出由背景图像自动处理。