如何使比浏览器窗口更宽的图像居中(不是背景图像)

Question

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

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

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

但是,如果容器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>

这...可能会让你到达你想要的地方.

和示例:小提琴 和来源

编辑

修复它:小提琴 和来源

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/