Div像img一样响应[重复]答案

【问题标题】：Div responsive like an img [duplicate]Div像img一样响应[重复]
【发布时间】：2015-11-14 00:18:18
【问题描述】：

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

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

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;
}

【问题讨论】：

一个 div 的行为方式相同，只是它的内容在调整父级大小时不会缩放。您是否在寻求一种将 div 的纵横比保持在特定关系的方法？
@shennan 是的，他是，已经有一个帖子，所以我在我的回答中链接到它:)
喜欢这个jsfiddle.net/j08691/r05zpdd0/1?
对不起，现在我看到我的问题是重复的。我现在该怎么办？
@Nrc 别担心，你可以这样留下你的帖子，它将充当指向“主要”帖子的指针。

标签： html css image responsive-design

【解决方案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 的 padding-top 为 50%，这意味着 div 的高度始终是宽度的 50%。

【讨论】：