【问题标题】：How to center an image that is wider than the browser window (not a background image)如何使比浏览器窗口宽的图像居中（不是背景图像）
【发布时间】：2011-10-15 11:02:41
【问题描述】：

如何将大图像放在浏览器窗口的中心，这样如果它比窗口宽，它仍然会居中？

见：http://carolineelisa.com/rob/

我不想简单地将图像设置为背景图像，因为它会动态更改为不同大小的图像，并且我希望能够向下滚动以在正确的高度查看它们。

但是，如果容器 div 的高度可以根据背景图像的高度而改变，我愿意将其设为背景图像吗？

我不介意有一个水平滚动条，但我不想这样做。

谢谢！

【问题讨论】：

您可以使用绝对/固定位置、宽度和高度为 100% 的容器来执行此操作。然后背景可以设置为background-position: center center 我认为？
感谢@Joseph，这完美居中，但恐怕没有滚动条让我看到图像的下半部分。
嗯...让我回答一下...可能会让事情变得更容易。
看我的回答。（哇哦……我差点用分号 O_O 结束这句话）。
我冒昧地重新构建了您的页面，看看我是否无法解决这个问题，它似乎已经奏效了。查看我的最新编辑。

标签： css image center

【解决方案1】：

<div style="background:url(/path/to/image.png) center top; width:100%; overflow:hidden">
  <img src="/path/to/image.png" style="visibility: hidden;">
</div>

这...可能会把你带到你想要的地方。

还有例子：fiddle and source

编辑

已修复：fiddle and source

【讨论】：

哦，天哪，刚刚意识到，在我动态更改后，div 保持了原始不可见占位符图像的高度。所以我想我毕竟会使用 javascript。
我的错，其他样式干扰了我的版本。谢谢！

【解决方案2】：

将近两年后，我遇到了类似的问题，想只用 html/css 来解决它（仅使用 javascript 在图像之间进行切换）。

最后我必须解决总共三个元素来实现始终居中的图像（图像比页面/包装元素更小和更大）。

html结构

<div class="container">
    <div class="align"><img src="http://thecustomizewindows.com/wp-content/uploads/2011/11/bulb-wallpaper.jpg" /></div>
</div>

CSS：

div.container
{
    position: relative;
    width: 100%;
    overflow: hidden;
}
div.container div.align
{
    position: relative;
    width: 10000px;
    left: 50%;
    margin: 0 0 0 -5000px;
    text-align: center;
}

虽然我不太喜欢处理过度拉伸的元素，但它似乎非常有效。

这是小提琴：http://jsfiddle.net/NjJ3G/3/

【讨论】：

Rogier Spiekers 的回答是个好办法！对于动态使用，看看 jQuerys "wrap()"！
更好的解决方案。我不得不稍微调整一下，因为我实际上希望溢出-y 可见，但这极大地帮助了我。 +1
运行良好。对于打印页面，添加body {margin: 0} 以确保图像实际到达页面边缘。
内联 CSS 的版本：

【解决方案3】：

带有未知尺寸的img标签的最佳解决方案是：

.bg-fluid {
    position:absolute;
    left:-1000%;right:-1000%; // horizontal center
    top:-1000%; bottom:-1000%; // vertical center
    margin: auto;
}

您还可以通过以下方式使其响应：

.bg-fluid-responsive {
    min-width: 100%;
    min-height: 100%;
}

和img 标签：

<img class="bg-fluid bg-fluid-responsive" src"..."/>

不需要容器。

注意：纵横比将保留。

【讨论】：

【解决方案4】：

老实说，最好的方法是使用背景图片。由于您将使用 javascript 来更改图像，因此您可以继续添加更多内容来更改高度。为此，除了将其设置为背景图像外，还将图像加载到不可见的 div (style="position:absolute; top:-3000px; left:-3000px;") 中。然后，您可以使用 javascript 从不可见 div 内的 img 标签获取其高度。

【讨论】：