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

Question

[KuzmenkoArtem]

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

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 не могу понять

Answer 1

[BMO1337]

Background-size: cover;

Comments

[KuzmenkoArtem]

ну само-то изображене будет уменьшаться нормально. Но вся соль в диве, который всегда height: 300px;

Answer 2

[Anna_BS]

codepen.io/Anna_Batura/pen/ZQYWVN
.img{
background-image: url(img.jpg);
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 300px;
}

Comments

[KuzmenkoArtem]

Простите сразу не сказал, мне нужно чтобы картинка полностью помещалась