Резиновый background у div?

Нужно что бы был резиновый бэкгроунд.
Что у меня есть:

HTML

<div class="block">
    <div class="img"></div>
    <p>text</p>
</div>
<div class="block">
    <div class="img"></div>
    <p>text</p>
</div>

CSS

.block{ width: 50%; float: left;}
.img{ 
    background: url(img.jpg) no-repeat;
    background-size: contain;
    width: 100%;
    height: 300px;
}

В данном случае фон действительно резиновый, но при уменьшении экрана уменьшается только ширина, высота остается та же, и при просмотре например с телефона текст который идет за картинкой отображается с большим отступом сверху. Все впринципи логично, но как сделать правильно БЕЗ JS не могу понять