javascript - CSS，高度为 :auto, 的图像在屏幕调整大小时覆盖其下方的 div(手机水平放置)

Question

我正在设计网站的手机部分。我有一个顶部:0%、位置:固定的横幅图像，宽度:100%，高度:自动。当手机水平转动时，横幅图像会很好地缩放以覆盖屏幕宽度。

但是我的问题是将内容定位在该图像下方。例如，position:absolute 和 top:20% 的 div 在垂直屏幕的横幅下方显示一个 div。不幸的是，当水平转动屏幕时，图像会放大并覆盖 div。有没有CSS解决方案可以任意抓取图片的高度并相应调整其顶部百分比？

编辑:我也对 javascript 解决方案持开放态度 :) 谢谢。

Answer 1

这是一种方法。

例如，如果这是 HTML:

<div class="header">
    <img src="http://www.placekitten.com/400/100">
</div>
<div class="main">Some content...</div>

您可以使用以下 CSS 固定定位您的标题并绝对定位您的主 block :

.header {
    position: fixed;
    top: 0px;
    left: 10px;
    right: 10px;
    border: 1px dotted blue;
}
.header img {
    width: 100%;
    vertical-align: top;
}
.main {
    border: 1px solid blue;
    position: absolute;
    top: 147px;
    left: 10px;
}

要在窗口调整大小时自动重新定位 .main block ，您可以使用 以下 jQuery:

function fixMainTop() {
    $(".main").css({
        "top": $(".header").outerHeight()
    });
}

fixMainTop();

$(window).resize(function () {fixMainTop();});

您在页面加载时调用 fixMainTop()，然后在窗口大小发生变化时调用。

但是，$resize 函数可能会导致屏幕看起来有点跳动，但我认为您可以接受这一点，因为许多使用 jQuery 的网站都表现出相同的行为。

演示 fiddle :http://jsfiddle.net/audetwebdesign/spxCj/

附言

如果网站具有固定宽度，您可能不需要 .resize 操作...但很高兴看到它是如何完成的。