Css 垂直居中溢出内的大图像：Firefox中的隐藏div

我已经看到了不少与此相关的帖子，但似乎没有一条适合我的情况。我试图将一个大图像居中，以便垂直溢出均匀地发生在顶部和底部。该图像不能是背景图像

<div id="container-outer">
  <div id="container-inner">
      <img src="image.png"/>
  </div>
</div>

这适用于Chrome、IE和Safari。。。但由于某些原因，Firefox不喜欢它。我甚至相当肯定几天前我让它在FF上工作，但现在我已经在两台独立的计算机上进行了测试，什么都没有

通过CSS以小尺寸水平均匀裁剪的额外点数

这是一把小提琴：

更新的Fiddle：（上面的代码现在与此匹配。）

第二个更新：为了澄清，在重新调整大小时，这会在chrome、safari和ie中产生缩放效果。我正在尝试在Firefox中实现这一效果。

给容器内部100%的宽度和高度就可以了

#container-inner {
    position:relative;
    border: 2px solid red;
    width: 100%;
    height: 100%;
}

更新： 经过一连串的评论，我们决定这是一个可以接受的答案。

---

我不能100%确定我是否理解了你的问题，但我尝试了你在FF和Chrome中使用的小提琴，以了解其中的区别。我看到图像在FF中的对齐方式与在Chrome中的对齐方式不同。您可以尝试将图像放置在外部DIV而不是内部DIV中。这将在所有浏览器中正确对齐图像

<div id="container-outer">
<div id="container-inner">
    </div>
    <img id="img" src="http://upload.wikimedia.org/wikipedia/commons/b/b5/800x600_Wallpaper_Blue_Sky.png" />

</div>

#img{
 width:100%;
min-height:300px;
max-height:600px;
min-width: 400px;
max-width:800px;
margin:auto;
position: absolute;
border: 2px solid green;
left: 0;
top:-50%;
bottom: 0;
right: 0;
}

#img{
宽度：100%；
最小高度：300px；
最大高度：600px；
最小宽度：400px；
最大宽度：800px；
保证金：自动；
位置：绝对位置；
边框：2倍纯绿；
左：0；
前-50%；
底部：0；
右：0；
}

通过去掉顶部：50%来去除垂直裁剪；图像现在变得扭曲了。我选择的图像不太明显，因为它是一幅风景画；但我更新了你的小提琴与一座建筑和重新大小的扭曲是相当明显的。无视上述。。。我的也被扭曲了，没有垂直裁剪。。。现在正在努力。现在我们开始：如果你取出我放入的#内容内部的宽度和高度，然后再取出#容器内部的宽度：100%，那么图像将根据高度：100%自动缩放。如果你的最终目标更加明确，这也会有所帮助。在我仍然不知道为什么你会排在前：50%；将图像向下推50%到容器中是对该代码的合理响应。如果你把它拿出来，图片会很好地填满容器。像这样的东西怎么样：它在Chrome和Firefox中的工作方式似乎是一样的。唯一不同的是，Chrome会向上缩放和扩展，而Firefox会向下缩放和扩展。对不起，我已经将高度和宽度设置为100%，这完全破坏了我想要的效果。这里已经更新，请尝试将图像的顶部设置为-50%。我已经编辑了我的答案。在Firefox和Chrome中似乎对我都有效。我可能遗漏了一些简单的东西，但我似乎无法将其放在溢出的中心：隐藏div这是我使用代码的窍门，我将img放在了#容器内部。您可以看到，在小尺寸的情况下，它是如何从容器底部脱落的。如果您将img放在内部容器的外部，它会起作用。这是你的最新资料。谢谢你的提琴。不幸的是，在我的网站上，我只能让这个项目占用一定的空间，因此容器div设置为Height:300px，Overflow:Hidden。

<div id="container-outer">
<div id="container-inner">
    </div>
    <img id="img" src="http://upload.wikimedia.org/wikipedia/commons/b/b5/800x600_Wallpaper_Blue_Sky.png" />

</div>

#img{
 width:100%;
min-height:300px;
max-height:600px;
min-width: 400px;
max-width:800px;
margin:auto;
position: absolute;
border: 2px solid green;
left: 0;
top:-50%;
bottom: 0;
right: 0;
}