Vertical alignment for a fluid div displaying images of different heights

Alright.. here's the deal. I've been modifying a WordPress theme I purchased a while ago and I've hit a wall. Unfortunately, I'm not CSS literate. I can adjust stuff, 开发者_运维百科but I doubt I will be able to solve this on my own. So, here's a cry for help :)

The website and the div's code are bellow: http://photography.hamsterwheelproject.com/category/photo-of-the-day/

element.style {
overflow: hidden;
z-index: 0;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
display: block;
}

#superbgimage img {
position: static !important;
height: auto !important;
width: 100% !important;
top: 0 !important;
margin: 0 auto;}

The idea is to have the images always displayed vertically centered. I'd like to keep the width to 100% and fill the screen horizontally, while maintaining the photos' aspect ratio.

Thanks!

If you can give your container a fixed height, it's easy with CSS:

#superbgimg {
    line-height:800px; /* height of screen */
}

#superbgimg img {
    vertical-align:middle;
}

If you can't set a fixed height in your CSS, you can set it dynamically with JQuery (or any other javascript solution) quite easily:

$(function(){
    $('#superbgimg').css('line-height',$('#superbgimg').height() + 'px');
});