响应式垂直中心,隐藏溢出

Question

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

这是一些代码:

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

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

小提琴

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%);
}