水平居中和垂直居中响应图像

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的背景颜色设置为黑色以查看没有图像边缘的缩放。我使用了这些尺寸，以便通过调整框架来测试它。