CSS 使全宽横幅图像居中，没有滚动条答案

【问题标题】：CSS to center full-width banner image without scrollbarsCSS 使全宽横幅图像居中，没有滚动条
【发布时间】：2015-12-24 11:30:12
【问题描述】：

我有一个内容为 1000 像素宽的页面。在这个页面大约一半的地方，我需要显示一个 600 像素高和 2000 像素宽的图像。

此图像应始终为 600 像素高，保持其纵横比，任何无法适应当前浏览器宽度的内容，应在左右两侧均等地下降（因此图像在浏览器窗口更改时保持居中） .

只有图像 - 上面什么都没有。

我尝试构建一个 div 并将图像放在它之外（超过 1000 像素，但无法使其工作。如果我将它从容器中取出，它可以使用：

.wideimage {
    background: url(../images/wide.jpg) no-repeat center center;
    height:600px;
}

这可行，但如果我能在 1000px 容器内执行此操作并让图像落在浏览器窗口边缘之外会更好。

【问题讨论】：

【解决方案1】：

要使图像落在容器外并居中，请尝试将其设为绝对值，向左 50% 并将边距偏移图像宽度的一半：https://fiddle.jshell.net/7vpmndfo/1/

.wideimage {
  position:absolute;
  left:50%;
  margin-left:-1000px;
}

并且为了防止浏览器上出现水平滚动条，您需要将页面放在包装器 div 中（如果还没有的话）并带有 overflow:hidden;

【讨论】：

【解决方案2】：

如果您有各种各样的图像，因此可能事先不知道图像的宽度，您可以使用经典的“居中”css 技术将图像居中：

.wideimage {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
}

【讨论】：