Html 水平及；垂直居中响应图像

我试图在一个高度和宽度可变的div内获得一个水平和垂直居中的图像。 到目前为止，一切都很好

现在的问题是，如果容器的高度和/或宽度小于图像的高度或宽度，则图像也应响应并进行调整

经过研究，通过所有不同的“解决方案”，我无法找到完美的解决方案，但有两个很接近：

1。）第一个可以完成我需要的所有功能，但当窗口宽度小于图像宽度时，图像不再水平对齐：

HTML

2。）第二个示例使所有内容保持对齐，但当高度小于图像高度时，图像不会缩小：

HTML

---

我过去曾尝试过这一点，我提出的唯一非JS解决方案（顺便说一句）是：

html，正文{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
身体{
显示：表格；
}
.集装箱{
显示：表格单元格；
垂直对齐：中间对齐；
边框：1px实心#f00；
}
.container>div{
宽度：100%；
身高：100%；
保证金：0自动；
边框：1px实心#00f；
最大宽度：550px；
最大高度：480px；
背景：url（“http://dummyimage.com/550x480/000/fff?text=H/V 居中和高度/宽度变量“）50%50%无重复；
背景尺寸：包含；
}

---

将div的背景色设置为黑色，以查看没有图像边缘的缩放。我使用了这些尺寸，因此您可以通过调整帧的大小来测试它。

这很好，但我需要图像的缩放比例不要大于实际尺寸，只在较小的窗口上更小。它应该保持水平和垂直居中，就像在我的例子中一样。我再次玩了一遍，并设法用你的背景而不是图像的方法组合了一把工作小提琴：我还需要寻找另一种解决方案。这将只适用于图像，而不适用于任何其他媒体，如视频或flash。

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

.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;
}

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

#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;
}

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>