像img一样快速反应

Question

如果给img一个宽度：100%，那么它就是img；没有高度。当窗口发生变化时，宽度将适应其父窗口，高度将保持比例。我可以让div以同样的方式运行吗？

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

这里要播放的示例：http://jsfiddle.net/r05zpdd0/

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>

Js文件：http://jsfiddle.net/nfvksydp/

因此，我不得不创建一个围绕#nota-div的包装器，它的位置是相对的。这允许#nota-div完全位于这个div中。wrapdiv的填充顶部为50%，这意味着div的高度始终是宽度的50%。