CSS以无滚动条为中心全宽横幅图像

Question

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

此图像应始终为600px高，保持其宽高比和任何不适合当前浏览器宽度的图像，应在左右两侧均匀下降（因此图像在浏览器窗口更改时保持居中）

只有图像 - 没有任何内容。

我已经尝试构建一个div并让图像落在它之外（超过1000px，但无法使其工作。如果我将其从容器中分离出来，它可以使用：

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

这样可行，但如果我可以在1000px容器中执行此操作并使图像落在浏览器窗口的边缘之外，那将会更好。

Answer 1

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

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

为了防止浏览器上出现水平滚动条，你需要将页面包含在一个包装div中（如果它还没有），并使用overflow：hidden;

Answer 2

如果你有各种各样的图像，所以可能事先不知道图像的宽度，你可以用经典的“中心任何东西”css技术使图像居中：

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