Responsive Vertical Center with Overflow Hidden

Question

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="">
</div>

Accepted Answer

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

<div class="img-wrapper">
    <img src="">
</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

Answer 2

I found a way to make it work with only a max-height (as opposed to a fixed height) set on the container.

The bad news is that it requires an additional wrapper element.

HTML:

<div class="img-wrapper">
    <div class="img-container">
        <img src="">
    </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%);
}

Answer 3

Try

<html>
<head>
</head>
<body >

    <div style="max-height: 425px;border:1px solid;max-width:500px;overflow:hidden">
        <img src="" style='position: relative;top: -231px;left: -500px;'>
    </div>
</body>
</html>

Answer 4

If you dont need to use img tags (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(');"></div>

Answer 5

if you want to make a responsive image, try using
<div style="">
<img src="" width="100%" height="100%">
</div>

Responsive Vertical Center with Overflow Hidden

5 Answers

Must Read

Your Answer

James H. Sterling

Responsive Vertical Center with Overflow Hidden

5 Answers

Must Read

Your Answer

Sign up or log in

Post as a guest

James H. Sterling