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;
}