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');
});

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

1 个答案: