Responsive vertical center with overflow hidden

css, html, overflow, responsive-design, vertical-alignment

Solution

to center vertically a bigger image you can use the construction and css bellow

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

And 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

Problem

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. Here is some code: ``` <div style="max-height: 425px; overflow: hidden;"> <img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg"> </div> ```

Original source