Question

我见过很多与此相关的帖子，但似乎没有一个适用于我的案例。我试图将一个大图像居中，以便在顶部和底部均匀地发生垂直溢出。图像不能是背景图像。

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

和css ......

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

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

通过CSS在小尺寸上水平均匀裁剪的加值点。

这是一个小提琴：http://jsfiddle.net/Kd8bM/1/

UPDATED Fiddle：http://jsfiddle.net/Kd8bM/9/（上面的代码现在与此匹配。）

第二次更新：为了澄清，在重新调整尺寸时，这会在chrome，safari和ie中创建缩放效果。我正试图在Firefox中找到一种方法。

Answer 1

给＃container-inner一个100％的宽度和高度可以解决问题。

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

http://jsfiddle.net/Kd8bM/5/

更新：在评论的主题之后我们解决了这个问题，这是一个可接受的答案 http://jsfiddle.net/Kd8bM/10/

Answer 2

我不是百分百肯定我得到了你的问题，但我尝试了你在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;
}

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

2 个答案: