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

Question

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

htmlcssresponsive-designoverflowvertical-alignment

17

在搜索了 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

6个回答

6

我找到了一种方法，只需在容器上设置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

这对于绝对定位会引起问题的情况非常有用。谢谢！ - cpg

0

现在你可以使用flexbox来实现这个：

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

.container {
  overflow: hidden;
  max-height: 425px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container img {
  max-width: 100%;
}

在 CodePen 上查看示例：

https://codepen.io/runonce86/pen/vYrpYvG

- Camilo

0

如果您不需要使用标签（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>

- SW4

我想要像使用图像（<img>）一样使用它，而不是作为背景。 - Henrik Albrechtsson

@Henrik Albrechtsson 恐怕你需要使用一些JS来完成这个 :( 因为容器和/或图像(?)的大小可能会变化，为了在CSS中计算偏移量，至少需要硬编码一个，除非它在运行时(JS)被计算，除非图像被缩放。 - SW4

实际上，这个解决方案在不使用任何Javascript的情况下也可以正常工作，但仅适用于Webkit浏览器。 - Henrik Albrechtsson

@Henrik Albrechtsson 我不确定我会称特定的浏览器子集解决方法为解决方案:S 但是，是的，它可以在WebKit中实现-您需要什么支持？ - SW4

如果我能够支持最常见的浏览器Firefox，Chrome和Safari，那就太好了。 - Henrik Albrechtsson

-1

试试

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

- Aiglegate

使用像素来定位图像会使其不具有响应性。 - Henrik Albrechtsson

-2

如果你想制作一个响应式图片，可以尝试使用以下代码：
<div style="">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg" width="100%" height="100%">
</div>

- Ahmad Ramli

我想使用overflow hidden来移除上述图片中的黑色边缘。 - Henrik Albrechtsson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alexandru Diacov · Accepted Answer

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

代码片段