CSS DIV 滚动条和带最小宽度的背景答案

【问题标题】：CSS DIV scrollbar and background with min-widthCSS DIV 滚动条和带最小宽度的背景
【发布时间】：2012-08-16 10:31:31
【问题描述】：

我有一个 1400 像素宽的标题 DIV，其中包含一个必须始终居中的背景图像。

我有一个需要 960 像素宽的网站。

当我调整浏览器的大小（缩小它）时，在达到 960 像素之前我不想要任何水平滚动条，但标题/背景上较大的宽度会导致这种情况。

是否可以在调整大小时停止所有水平滚动条直到 960px 并保持标题 div 中的背景图像居中？？

任何帮助表示赞赏！我在这里设置的一些代码用于快速测试...

http://jsfiddle.net/gVuvk 背景图像的宽度为 1400 像素。我需要滚动条从 960 像素开始，而不是 1400 像素。这可能吗？

【问题讨论】：

标签： css

【解决方案1】：

将#header的宽度从固定像素更改为100%

演示：http://jsfiddle.net/wNSTD/3/

【讨论】：

这适用于示例 - 但意识到我做错了什么......新版本 ehre - 请注意图像现在是内联的 - 而不是背景。有什么方法可以为其中包含宽图像的 div 执行相同的最小宽度？ jsfiddle.net/wNSTD/5
@lowercase 你可以使用#header img {width:100%} 这将适合图像的宽度，但也会调整高度以保持纵横比。
感谢您的帮助，但当我使用 jquery 运行它时仍然无法正常工作。此处的新 JSFiddle 显示了正在运行的 jquery 插件。 jsfiddle.net/gVuvk 背景图片宽度为1400px。我需要滚动条从 960 像素开始，而不是 1400 像素。这可能吗？

【解决方案2】：

尝试摆弄最小宽度，如果这不起作用，请使用边距，css auto-margins 在这里很有用。所以，做这样的结构：

<style>
.center_image
{
  margin: auto auto; // or you can modify the x or y seperately
  background-image:url("somesite.jpg");
}
</style>

<div class="outer">
  <div class="center_image">

【讨论】：

【解决方案3】：

将标题的宽度设置为 100% 并将背景图像居中。

background: url(http://fade.com.au/test/bg-image.jpg) no-repeat center center;
width: 100%;

演示：http://jsfiddle.net/post_erasmus/Hn6Zb/1/

【讨论】：