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

Posted 2023-03-05

技术标签:

【中文标题】隐藏溢出的响应式垂直中心【英文标题】：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>

【问题讨论】：

【参考方案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>

【讨论】：

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

以上是关于隐藏溢出的响应式垂直中心的主要内容，如果未能解决你的问题，请参考以下文章

响应式背景中的绝对中心文本

响应式设计：在任何屏幕尺寸中集中一个全屏正方形

响应式图像全屏和居中 - 保持纵横比，不超过窗口

响应式布局中ul的垂直对齐

如何垂直居中响应式剪切图像？

垂直对齐内容与浮动元素 + 响应式布局