css - 显示不同高度图像的流体 div 的垂直对齐

Question

好吧..这是交易。我一直在修改我不久前购买的 WordPress 主题，但我碰壁了。不幸的是，我不懂 CSS。我可以调整东西，但我怀疑我自己能否解决这个问题。所以，这里是求救的呼声:)

网站和div的代码如下: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;}

想法是让图像始终垂直居中显示。我想将宽度保持为 100% 并水平填充屏幕，同时保持照片的纵横比。

谢谢!

Answer 1

如果你可以给你的容器一个固定的高度，用 CSS 就很容易了:

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

#superbgimg img {
    vertical-align:middle;
}

如果您不能在 CSS 中设置固定高度，您可以使用 JQuery(或任何其他 javascript 解决方案)很容易地动态设置它:

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