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>
5 Answers
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;
}
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%);
}
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>
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>
if you want to make a responsive image, try using
<div style="">
<img src="" width="100%" height="100%"></div>
