Div отзывчивый как img

Question

У меня есть img, если я даю ему ширину: 100%; и нет высоты. Когда окно меняется, ширина приспосабливается к его родительскому элементу, а высота сохраняет пропорцию. Могу ли я заставить div вести себя одинаково?

По разным причинам мне нужно, чтобы div был шириной и высотой, чем img. В этом случае исходный размер img составляет 600 x 300 пикселей.

пример здесь, чтобы играть: 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> 

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

Так что я должен был создать обертку вокруг вашего #nota DIV, который позиционируется относительно. Это позволяет разместить #nota div абсолютно внутри этого div. Оболочка wrap имеет верхнюю часть 50%, что означает, что высота div всегда будет на 50% больше, чем ширина.