垂直对齐响应式宽度和高度图像

Question

我有一个div，它会随着屏幕的大小而改变宽度。我还希望div的高度随着图像的大小调整到最大高度，然后任何溢出的图像都将被隐藏。

到目前为止，我只能使用绝对定位使图像居中，但这意味着我还必须包含相同大小的占位符图像，以便div 将更改高度：

#test {
max-height: 400px;
width: 50%;
overflow: hidden;
position: relative;
}
#test .test-image {
width: 100%;
}
#test .vertical-align {
left: 0;
top: 50%;
position: absolute;
transform: translateY(-50%);
}

<div id="test">
<!-- this is a placeholder to make the div height expand / contract depending on the width -->
<img src="http://lorempixel.com/800/800/sports/1" class="test-image">

<!-- this is the vertically aligned image -->
<img src="http://lorempixel.com/800/800/sports/1" class="test-image vertical-align">
</div>

有没有办法使用相对定位来做到这一点，这样我就不需要包含占位符图像了？

我想到了以下内容，但它似乎不起作用，因为它似乎只是将图像移回它开始的位置并从底部裁剪而不是居中：

#test {
max-height: 400px;
width: 50%;
overflow: hidden;
position: relative;
}
#test .test-image {
width: 100%;
}
#test .vertical-align {
margin-top: 50%;
position: relative;
transform: translateY(-50%);
}

<div id="test">
<!-- this is the vertically aligned image -->
<img src="http://lorempixel.com/800/800/sports/1" class="test-image vertical-align"> 
</div>

这在纯 css 中可能吗？ 请只发布 css 解决方案 - 没有 js 答案。

谢谢

更新

我已经设法弄清楚为什么绝对有效但相对无效 - 当绝对时，top:50%是父div 的 50%，而相对时，margin-top:50%是图像高度的 50%，这就是为什么翻译只是将其移回它的起点。

所以我想任何解决方案都将基于在应用转换之前将图像向下移动父高度的 50%。 我在父级上玩过填充，但这似乎也不起作用

Answer 1

我找到了 flex 的解决方案，希望您觉得它有用：

#test {
max-height: 400px;
width: 50%;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
overflow:hidden;
}
#test .test-image {
width: 100%;
}

<div id="test">
<img src="http://lorempixel.com/800/800/sports/1" class="test-image">
</div>

更新：

我只是通过添加一个额外的div 让它在 IE 11 中工作。也许这对你来说还不够，但我花了我所有的资源。

#container {
display: flex;
}
#test {
max-height: 400px;
overflow: hidden;
width: 50%;
align-items: center;
align-content:center;
display: flex;
}
#test .test-image {
width: 100%;
}

<div id="container">
<div id="test">
<img src="http://lorempixel.com/800/800/sports/1" class="test-image">
</div>
</div>