水平居中和垂直居中響應圖像

Question

我試圖在水平和垂直居中的變化高度和寬度的div內獲取圖像。 到目前爲止，這麼好。（請參閱下面的jsfiddle鏈接）

現在，捕捉是圖像也應該是響應和調整，如果容器的高度和/或寬度小於圖像的高度或寬度。

研究，經歷各種不同的「解決方案」在那裏擺弄和一個解決方案後，我無法找到最完美的一個，但是兩人來到靠近：

1）這第一個廣告我需要的一切除時的窗口寬度比圖像寬度，圖像不再是水平排列的：

http://jsfiddle.net/me2loveit2/ejbLp/8/

HTML

<div class="overlay"> 
    <div class="helper"></div> 
    <img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable"> 
</div> 

CSS

.helper { 
    height:50%; 
    width:100%; 
    margin-bottom:-240px; 
    min-height: 240px; 
} 
.overlay { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    cursor: pointer; 
    background-color: rgba(0, 0, 0, 0.5); 
} 
img { 
    margin: 0 auto; 
    max-width: 100%; 
    max-height: 100%; 
    display: block; 
} 

2）第二個例子使一切排列，但圖像沒有縮小時，高度小於圖像高度：

http://jsfiddle.net/me2loveit2/ejbLp/9/

HTML

<div id="outer"> 
    <div id="container"> 
     <img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable"> 
    </div> 
</div> 

CSS

#outer { 
    height:100%; 
    width:100%; 
    display:table; 
    position:fixed; 
    top:0px; 
    left:0px; 
    background-color: rgba(0, 0, 0, 0.5); 
} 
#container { 
    vertical-align:middle; 
    display:table-cell; 
    max-width: 100%; 
    max-height: 100%; 
} 
img { 
    margin: 0 auto; 
    max-width: 100%; 
    max-height: 100%; 
    display:block; 
} 

Answer 1

我已經在過去，唯一的非JS解決方案，我想出來的（這是frowned upon，順便說一句）試圖這個是這樣的：

html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 

body { 
    display: table; 
} 

.container { 
    display: table-cell; 
    vertical-align: middle; 
    border: 1px solid #f00; 
} 

.container > div { 
    width: 100%; 
    height: 100%; 
    margin: 0 auto; 
    border: 1px solid #00f; 
    max-width: 550px; 
    max-height: 480px; 
    background: url("http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable") 50% 50% no-repeat; 
    background-size: contain; 
} 

<div class="container"><div></div></div> 

http://jsfiddle.net/pYzBf/1/

將div的背景顏色設置爲黑色以查看沒有圖像邊緣的縮放。我使用了這些尺寸，以便通過調整框架來測試它。