隐藏溢出的响应式垂直居中

Question

在搜索 Stack Overflow 和 Google 之后，我仍然想知道如何将比其父元素大的图像垂直居中。我不使用高度，只使用最大高度，因为我想制作一个没有 jQuery 的响应式解决方案。如果可能的话。

这是一些代码：

 <div style="max-height: 425px; overflow: hidden;">
    <img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
</div>

原文由 Henrik Albrechtsson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要垂直居中更大的图像，您可以使用下面的构造和 css

 <div class="img-wrapper">
    <img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
</div>

和CSS：

 .img-wrapper{
    position: relative;
    overflow:hidden;
    height:425px;
}

.img-wrapper img{
    position: absolute;
    top:-100%; left:0; right: 0; bottom:-100%;
    margin: auto;
}

小提琴

原文由 Alexandru Diacov 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我找到了一种方法，使其仅与容器上设置的 max-height （而不是固定高度）一起工作。

坏消息是它需要一个额外的包装器元素。

HTML:

 <div class="img-wrapper">
    <div class="img-container">
        <img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
    </div>
</div>

CSS：

 .img-wrapper {
    overflow: hidden;
    max-height: 425px;
}

.img-container {
    max-height: inherit;
    transform: translateY(50%);
}

.img-wrapper img {
    display: block;
    transform: translateY(-50%);
}

原文由 Thomas Bachem 发布，翻译遵循 CC BY-SA 3.0 许可协议