如何在不使用背景的情況下使用HTML和CSS3創建響應式，垂直和水平居中的圖像

Question

我的目標是在容器內垂直和水平居中放置圖像，並且圖像要占用盡可能多的空間，而不用改變原始的寬高比。

使用{background-size：contains; 背景位置：中心； 背景重復：norepeat; }不是一個選項，因為我需要在圖像的一角附加一個覆蓋div。 使用背景將意味着包含div的圖像大小將不精確。

這是嘗試使用flexbox進行的操作。 不幸的是，它不適用於Firefox（至少在Linux上）。 當容器的寬度大於給定高度的圖像寬度時，Firefox會拉伸圖像。 Flexbox嘗試

這是另一種嘗試，這次使用絕對定位w /向左：50％； 為了使第一個div居中並進行變換：平移（-50％，-50％）以便使圖像居中。 結果不可接受，因為image-wrapper div（帶有綠色的“ olivedrab”邊框）不在Firefox上的圖像周圍（垂直調整窗口大小時，在chrome中是相同的）。 這意味着不能將疊加層直接附着在圖像上（並在調整大小后跟隨）。 剩下50％+翻譯嘗試

注意：不需要Javascript。

Answer 1

<style>
div {
    width: 400px;
    height: 400px;
    line-height: 400px;
    background-color: #cccccc;
    vertical-align: middle;
    position: relative;
    border: 1px solid black;
}

img {
    position: absolute; 
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    vertical-align: middle;
    width: auto;
    height: auto;
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
} 
</style>

在IE9和FF中測試。

Answer 2

這有效：

 div { width: 30em; height: 30em; display: flex; align-items: center; justify-content: center; /* Just to illustrate the example better */ background-color: lightgray; margin-bottom: 1em; } img { max-width: 100%; max-height: 100%; } 

 <div><img src="http://static.tumblr.com/9dc5afd0db110ad78cb81e0b1dd84ebc/7dmyfag/NGfmkucxa/tumblr_static_tyrion-lannister.jpg" /></div> <div><img src="http://upload.wikimedia.org/wikipedia/en/5/50/Tyrion_Lannister-Peter_Dinklage.jpg" /></div>