垂直居中溢出的大圖像：隱藏的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中

回答

相關問題