Question

如果我给它一个宽度，我有一个img：100％;并没有高度。当窗口改变时，宽度适应其父级，高度保持比例。我可以使div的行为方式相同吗？

由于不同的原因，我需要div是宽度和高度比img。在这种情况下，img原始大小为600 x 300像素。

HTML：

<img src="http://www.w3.org/html/logo/downloads/HTML5_sticker.png"/>
<div id="nota">some text</div>

CSS：

img {
    position:relative;
    margin:0 auto;
    width:100%;
}

div {
    position:relative;
    margin:0 auto;
    width:100%;

    text-align: center;
    display: inline-block;
    background: blue;
}

Answer 1

你当然可以。 CSS：

    img {
        position:relative;
        margin:0 auto;
        width:100%;
    }

    div.wrap{
        position:relative;
        margin:0 auto;
        width:100%;
        padding-top:50%;
        text-align: center;
        display: block;
        background: blue;
    }

    div#nota
    {
        position:absolute;
        top:0;
    }

HTML：

<img src="http://www.w3.org/html/logo/downloads/HTML5_sticker.png"/>
<div class="wrap">
    <div id="nota">some text</div>
</div>

Jsfiddle：http://jsfiddle.net/nfvksydp/

所以我必须围绕#nota div创建一个包装器，它位于相对位置。这允许#nota div绝对定位在这个div中。 wrap div的填充顶部为50％，这意味着div的高度始终是宽度的50％。

Div响应就像img

1 个答案: