css 响应灵敏的垂直居中，隐藏溢出

ftf50wuq 于 2022-11-27 发布在其他

关注(0)|答案(6)|浏览(112)

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

css

来源：https://stackoverflow.com/questions/20141865/responsive-vertical-center-with-overflow-hidden

6条答案

按热度按时间

l7mqbcuq1#

要垂直居中一个较大的图像u可以使用结构和css波纹管

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

还有曹ss：

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

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

FIDDLE

赞(0）回复(0）举报 2022-11-27

qlckcl4x2#

我找到了一种方法，使它的工作只有一个max-height（相对于固定高度）设置在容器上。
坏消息是它需要一个额外的 Package 器元素。

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

赞(0）回复(0）举报 2022-11-27

cgyqldqp3#

尝试

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

赞(0）回复(0）举报 2022-11-27

nkcskrwz4#

如果不需要使用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>

赞(0）回复(0）举报 2022-11-27

p8h8hvxi5#

现在，您可以使用flexbox来实现这一点：
第一个
查看CodePen上的示例：

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

赞(0）回复(0）举报 2022-11-27

brqmpdu16#

如果您想创建响应映像，请尝试使用
<div style="">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg" width="100%" height="100%">
</div>

赞(0）回复(0）举报 2022-11-27

我来回答

css 响应灵敏的垂直居中，隐藏溢出

6条答案

相关问题

热门标签

最新问答