html - CSS居中全宽横幅图像没有滚动条

Question

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

该图像应始终为 600 像素高，保持其宽高比，并且任何不能适应当前浏览器宽度的图像都应在左右两侧均等地下降(因此图像在浏览器窗口变化时保持居中) .

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

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

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

这行得通，但如果我能在 1000 像素的容器内完成并让图像落在浏览器窗口的边缘之外，那就更好了。

Answer 1

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

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

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