居中和填充一個圖像沒有失真

我一直在尋找差不多解決方案，我覺得應該是非常簡單的，但無法弄清楚。（注意 - 我現在處於一個非常基本的CSS學習階段）居中和填充一個圖像沒有失真

我有一個圖像放在一個頁面上。居中水平/垂直。在一個容量爲div的窗口中，窗口高度和寬度的80％。我希望圖像可以伸展以填充該高度或寬度，基於最小的那個。

我相信這對大多數人來說都很簡單，但是我只是在學習。任何方向都會很棒。

我創建的情況下，我沒有解釋不夠好一個例證： enter image description here

2013-05-12 user2375438

試試這個http://jsfiddle.net/David_Knowles/ddh2k/

這確實你最想要的東西。當屏幕高度降低到低於圖像固有高度時，如果您只希望圖像達到可用高度的80％，則需要添加一些額外的javascript。

<body> 
<div id="container"> 
     <img src="http://dummyimage.com/600x400/000/fff.jpg" alt="apropriate alt text"> 
</div> 
</body> 

html, 
body{ 
    height:100%; 
    width:100%; 
    margin:0; 
    padding:0; 
    background-color: #eee; 
} 
#container{ 
    margin: auto; 
    width:100%; 
    height:100%; 
    text-align:center; 
    font-size:0; 
    white-space:nowrap; 
    background:#aae; 
} 
#container:before{ 
    content:''; 
    display:inline-block; 
    height:100%; 
    vertical-align:middle; 
} 
img { 
    width:80%; 
    height:auto; 
    display:inline-block; 
    vertical-align:middle; 
    background:#fff; 
}

來源

2013-05-12 19:11:43 Timidfriendly

這與我已經嘗試過的類似，沒有讓圖像垂直居中的運氣。我對你提供的東西進行了修飾，並且仍然獲得了幾乎相同的結果。我一直在測試的頁面位於http://modnpop.com/test/ – user2375438 2013-05-12 21:03:21

居中和填充一個圖像沒有失真

回答

相關問題