垂直 alignment 用於顯示不同高度圖像的流體 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');
});