Html 响应垂直中心，隐藏溢出

在搜索了Stack Overflow和Google之后，我仍然想知道如何垂直居中一个比其父元素大的图像。我不使用height，只使用max height，因为我想在没有jQuery的情况下创建一个响应迅速的解决方案。如果可能的话

下面是一些代码：

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

试试看

---

如果您不需要使用

img

标签（）：

CSS

HTML

如果你想制作一个有响应的图像，试着使用

垂直居中一个更大的图像，你可以使用下面的结构和css

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

我找到了一种方法，只需在容器上设置一个
最大高度（相对于固定高度）

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

HTML:

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

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

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

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

使用像素定位图像会使其无响应我想使用overflow hidden删除上面的黑色边缘我想像图像一样使用它（）而不是background@HenrikAlbrechtsson担心您需要为此使用一些JS：（因为容器和/或图像（？）可以具有可变大小，为了在CSS中计算偏移量，至少必须对其中一个进行硬编码，除非其在运行时计算（JS），除非图像被缩放，否则不使用任何Javascript即可正常工作，但只能在webkit中使用browsers@HenrikAlbrechtsson不确定我是否会将特定的浏览器子集解决方案称为解决方案：但是的，它可以在webkit中完成-您需要什么支持？如果我可以支持最常见的浏览器Firefox、Chrome和SafariWorks e，我会很高兴在webkit浏览器中表现出色！你能让它在Firefox中也运行吗？@ExtPro实际上这个解决方案在不使用任何Javascript的情况下运行良好，但只在webkit浏览器中运行。为Firefox找到一个小技巧。将顶部和底部更改为-100%。很好！但正如我所说的，我不想使用固定宽度，这对响应目的不好这里有一篇博客文章为我做的（容器有固定的
高度
，img有
顶部
和
变换
）：这对于绝对定位引起问题的情况非常好。谢谢！
<div class="img-wrapper">
    <img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
</div>

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

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

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

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

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

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