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

我见过不少贴子与此相关，但它们都不适用于我的情况。我正在尝试将大图像居中，以便垂直溢出均匀地出现在顶部和底部。图像不能是背景图像。垂直居中溢出的大图像：隐藏的div在Firefox中

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

而三网融合

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

修订小提琴：http://jsfiddle.net/Kd8bM/9/（上面的代码，现在可以匹配这个）

第二次更新：为了澄清，有关重新大小这铬创建变焦效果， safari和ie。我试图找到一种方法在Firefox中获得。

来源

2013-11-21 codinforfun

给＃容器内100％的宽度和高度可以做的伎俩。

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

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

UPDATE：我们解决了这个是一个可以接受的答案评论跟帖。 http://jsfiddle.net/Kd8bM/10/

来源

2013-11-21 20:41:43 user2938649

您已通过取出顶部删除垂直裁剪：50％;并且图像现在变得扭曲。我选择的图像并不是那么明显，因为它是一个风景;但我更新了一座建筑物的小提琴，重新调整大小后，失真相当明显。 http://jsfiddle.net/Kd8bM/7/ – codinforfun

无视上述......矿被扭曲，也没有垂直作物......现在正在努力。在这里，我们去：http://jsfiddle.net/Kd8bM/9/ – codinforfun

如果你取出＃content-inner的宽度和高度，然后取出＃container-inner的宽度：100％，然后图像将根据高度自动缩放：100％。 http://jsfiddle.net/Kd8bM/8/ 如果您的最终目标更清晰，这也将有所帮助。 – user2938649

我不是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; 
}

来源

2013-11-21 20:56:45 Poornima

对不起，我已将高度设置为100％，并且宽度完全消除了我要去的效果。它已在此处更新http://jsfiddle.net/Kd8bM/9/ – codinforfun

尝试将图像设置为-50％。我编辑了我的答案。似乎在Firefox和Chrome中都适合我。 – Poornima

我可能会错过简单的东西，但我似乎无法得到这个中心内溢出︰隐藏的div这里是我的破解在使用你的代码http://jsfiddle.net/Kd8bM/12/我把IMG里面＃容器内部。你可以看到它如何在小尺寸它的容器底部脱落 – codinforfun

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

回答

相关问题