Как поместить div под изображением с изменяющейся высотой?

Question

На моем новом сайте у меня есть изображение, установленное на ширину 100%, а затем текст под ним. Как изменить положение текста в зависимости от высоты изображения?

HTML:

<div class = "pic"> 
    <img src="#"/> 
</div> 
<div class ="text"> 
    <h3>Some Important Message</h3> 
</div> 

CSS:

.pic{ 
    position:absolute; 
    left:0; 
    width:100%; 
} 
.pic img{ 
    position:absolute; 
    width:100%; 
} 

.text{ 
    position:relative; 
    margin-top:10px; 
} 

В соответствии с просьбой, вот скрипку https://jsfiddle.net/sLx3n2vz/

Answer 1

Пожалуйста, попробуйте следующее:

Удалить все вы Css и добавить только

.pic{ 
    width:100%; 
} 
.pic img{ 
    width:100%; 
} 
.text{ 
    margin-top:10px; 
} 

DEMO

как вы позиционируете свой HTML-элемент является неправильным. Пожалуйста, исправьте это.