隐藏溢出的响应式垂直中心答案

【问题标题】：Responsive vertical center with overflow hidden隐藏溢出的响应式垂直中心
【发布时间】：2013-12-07 03:45:19
【问题描述】：

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

这里有一些代码：

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

【问题讨论】：

标签： html css responsive-design overflow vertical-alignment

【解决方案1】：

我找到了一种方法，使其仅适用于容器上设置的 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%);
}

【讨论】：

这对于绝对定位导致问题的情况非常有用。谢谢！

【解决方案2】：

要垂直居中更大的图像，你可以使用下面的结构和 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;
}

FIDDLE

【讨论】：

在 webkit 浏览器中表现出色！你能让它在 Firefox 中也能工作吗？
@ExtPro 实际上这个解决方案可以在不使用任何 Javascript 的情况下正常工作，但只能在 webkit 浏览器中使用
为 Firefox 找到了一个小技巧。将顶部和底部更改为 -100%。 jsfiddle.net/PRJHw/5
不错！但正如我所说，我不想使用固定宽度，这不利于响应目的
这是为我完成的博客文章（容器有固定的height，img 有top 和transform）：jonrohan.codes/fieldnotes/vertically-center-clipped-image

【解决方案3】：

如果您想制作响应式图片，请尝试使用
<div style="">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg" width="100%" height="100%">
</div>

【讨论】：

我想使用overflow hidden来去除上面image的黑边

【解决方案4】：

如果你不需要使用img标签（fiddle）：

CSS

.imageContainer {
    margin: 0; 
    height: 200px; /* change it to your value*/
    width: 200px; /* or use fixed width*/
    background: transparent url('') no-repeat center;
    overflow: hidden; 
}

HTML

<div class="imageContainer" style="background-image: url('http://deepwish.com/site/wp-content/uploads/2013/10/butterfly2_large.jpg');"></div>

【讨论】：

我想将它用作图像 () 而不是背景
@Henrik Albrechtsson 恐怕你需要为此使用一些 JS :( 因为容器和/或图像（？）可以有可变大小，以便计算偏移量除非在运行时计算 (JS)，否则至少有一个 CSS 必须进行硬编码，除非图像被缩放
其实this solution 不使用任何 Javascript 也能正常工作，但只能在 webkit 浏览器中使用
@Henrik Albrechtsson 不确定我是否将特定的浏览器子集解决方案称为解决方案：S 但是可以，它可以在 webkit 中完成——您需要什么支持？
如果我能支持最常见的浏览器 Firefox、Chrome 和 Safari，我会很高兴

【解决方案5】：

试试

<html>
<head>
</head>
<body >

    <div style="max-height: 425px;border:1px solid;max-width:500px;overflow:hidden">
        <img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg" style='position: relative;top: -231px;left: -500px;'>
    </div>
</body>
</html>

【讨论】：

使用像素定位图像使其无响应