CSS，图像高度：自动，在屏幕调整大小时覆盖下面的div（手机水平放置） [英] CSS, image with height:auto, covers div beneath it upon screen resize (phone held horizontally)

问题描述

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

I'm designing the mobile phone portion of my website. I have a, top:0%, position:fixed, banner image with, width:100%, and height:auto. As the phone is turned horizontally the banner image scales nicely covering the screen width.

但是我的问题在于定位此图片下方的内容。例如，具有位置：绝对值和顶部：20％的div在垂直屏幕的横幅下方显示div。不幸的是，当水平转动屏幕时，图像会放大，并覆盖div。是否有一个CSS解决方案可以在任何点抓取图像的高度并相应调整其最高百分比？

However my issue is in positioning content below this image. For example a div with position:absolute, and top:20%, displays a div below the banner for a vertical screen. Unfortunately when turning the screen horizontally, the image enlarges, and covers the div. Is there a CSS solution that can grab the height of the image at any point and adjust its top percentage accordingly?

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

I'm also open to a javascript solution :) Thanks.

推荐答案

这是一种方法。

例如，如果这是HTML：

For example, if this is the HTML:

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

您可以使用以下CSS来固定头部和绝对位置您的主要块：

You can use the following CSS to fix-position your header and absolute-position your main 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 阻止当窗口重新调整大小时，你可以使用
以下jQuery：

To automatically reposition your .main block when the window re-sizes, you can use the following jQuery:

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

fixMainTop();

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

当你调用 fixMainTop（）时页面加载，然后每当窗口大小改变。

You call the fixMainTop() when the page load, and then whenever the window size changes.

然而， $ resize 函数可能导致略有跳跃看屏幕，但我认为你可以接受，因为许多使用jQuery的网站表现出相同的行为。

However, the $resize function can lead to slightly jumpy looking screen, but I think that you can accept that since many websites using jQuery exhibit the same behavior.

演示小提琴： http://jsfiddle.net/audetwebdesign/spxCj/

PS

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

You may not need the .resize action if the website has a fixed width... but it is good to see how it can be done.

这篇关于CSS，图像高度：自动，在屏幕调整大小时覆盖下面的div（手机水平放置）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！