Div響應像一個img

我有一個img，如果我給它一個寬度：100％;沒有高度。當窗口改變時，寬度適應其父，高度保持該比例。我可以讓一個div的行爲方式相同嗎？Div響應像一個img

由於不同的原因，我需要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; 
}

來源

2015-11-13 Nrc

div的行爲方式是相同的，只是在父級調整大小時其內容不會縮放。你是否想要一種方法來保持div在特定關係中的縱橫比？ – shennan

@shennan yep他是，已經有一個帖子，所以我在我的回答中鏈接到它:) – SidOfc

像這樣http://jsfiddle.net/j08691/r05zpdd0/1/？ – j08691

你當然可以。 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內。包裝div有50％的填充頂部，這意味着div的高度始終是寬度的50％。

來源

2015-11-13 16:06:12

Div響應像一個img

回答

相關問題