修改

Question

如何将大图像居中到浏览器窗口，如果它比窗口宽，它仍然会居中？

我不想简单地将图像作为背景图像，因为它会动态变化为不同大小的图像，我希望能够向下滚动以在正确的高度看到它们。

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

我不介意使用水平滚动条，但不愿意这样做。

谢谢！

Answer 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

Answer 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/

Answer 3

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

Answer 4

具有未知维度的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 个答案:

修改