Vertical align img in div with 100% height

Question

I'm trying to find a solution how to vertically align image in a div with 100% height (I don't know it's height).

I've got this HTML. I can't do much with HTML except add more wrappers:

<div id="wrapper">
    <img src="http://www.lovecpokladu.cz/nalezy/9687/5.jpg" alt="" />
</div>

And this quite fixed CSS - primary I need to accomplish that the image doesn't overflow browser's window in all browsers:

#wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ddd;        
}
img {
  max-width: 100%;
  max-height: 100%;
}

http://jsfiddle.net/2nkVm/

Thanks a lot!

Hi. I answered here : http://stackoverflow.com/questions/9915971/centering-an-image-on-screen-using-css-random-screen-image-dimensions/9916273#9916273 — mddw, Apr 20 '12 at 16:41

score 1 · Accepted Answer · answered Apr 20 '12 at 16:38

1

Try this:

img { 
     display:block; 
     position:absolute; 
     top:50%; 
     margin-top:"negative margin based on half of image height"; 
}

Updated your fiddle:

http://jsfiddle.net/2nkVm/3/

answered Apr 20 '12 at 16:38

Paradise

470
2
11

+1. But I don't know the image height. Any idea now? I rather don't want to use JavaScript here. – koubic Apr 21 '12 at 14:31

score -1 · Answer 2 · answered Apr 20 '12 at 16:45

$(document).ready( function() {
    positionImage();
    $(window).resize( function() {
        positionImage();
    });
});
function positionImage() {
    var wrapperHeightOffset = $('#wrapper').height() - $('#wrapper img').height();
    var wrapperHeightOffset = wrapperHeightOffset/2;
    $('#wrapper').css('paddingTop', wrapperHeightOffset + 'px');
}

Vertical align img in div with 100% height

2 Answers2