响应垂直中心带溢出隐藏 [英] Responsive vertical center with overflow hidden

问题描述

在搜索Stack Overflow和Google之后，我仍然想知道如何垂直居中比它的父元素大的图像。我使用没有高度，只是max-height，因为我想做一个响应的解决方案，没有jQuery。如果可能。

After searching both Stack Overflow and Google I still wonder how to vertical center a image that is bigger than it's parent element. I use no height, just max-height, because I want to make a responsive solution, without jQuery. If possible.

以下是一些代码：

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

推荐答案

and css bellow

to center vertically an bigger image u can use the construction and css bellow

<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

这篇关于响应垂直中心带溢出隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！