CSS - Отзывчивый ДИВ с фоном

Question

У меня есть следующие: -

<div id="join-container"></div> 

    #join-container { 
     position: relative; 
     width: 100%; 
     height: 600px; 
     background: url(../img/work-for-us-header.jpg); 
    } 

Я хочу сделать это реагировать так высота регулируется, как я сжиматься браузер, я попытался удалить ширину и высоту и добавление фона -размер: 100%; но это не отображает изображение.

Не могу понять, что я делаю неправильно.

Answer 1

meh, просто используйте img.

<img style='width:100%;height:100%;' src='cat.png'> 

или если вы должны ...

<div class="bla"> 
</div> 

.bla{ 
    width: 100%; 
    height: 600px; 
    background: url(../img/work-for-us-header.jpg) no-repeat; 
    background-size: contain; 
} 

Answer 2

Вы можете использовать padding-bottomНО вы должны определить соотношение сторон-изображения.

padding-bottom относится к ширине контейнера. Таким образом, если соотношение сторон вашего изображения является 16: 9 то ваш контейнер должен быть:

#container { 
    width: 100%; 
    padding-bottom: 56.25%; /* 9/16 = .5625 */ 
    background: transparent url('http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg') no-repeat center; 
    background-size: 100%; 
} 

https://jsfiddle.net/awqbLukm/

При изменении размера браузера, ваше заполнение дна будет изменять размер пропорционально ширине контейнера ,

Теперь, если вы собираетесь поместить некоторые другие содержимое внутри этой рамки, вы можете просто создать еще один div, который расположен абсолютно в этом #container и установить его width и height к 100%.

Answer 3

Это зависит от того, как вы хотите отображать свой фон. Он не требует содержимого внутри элемента, чтобы получить background-size: contain. ваша проблема в том, что ваш рост идет по пикселям, это не поддерживает вашу отзывчивость вашего элемента.

Лучше всего использовать либо процент, либо высоту видового экрана. Остерегайтесь того, что высота видового экрана не поддерживается всеми браузерами.

Пример 1: держите свой фон в центре и вписывайтесь в границы своего элемента, а также сохраняйте свой фон пропорциональным.

<div id="join-container"></div> 

УС:

#join-container { 
    position: relative; 
    width: 100vw; 
    height: 30vh; 
    background: url('http://placehold.it/1000x500') no-repeat; 
    background-size:contain; 
    background-position: center; 
    border: 1px black solid; 
} 

Пример 2: всегда заполнить элемент с фоном. Недостатком может быть искажение вашего изображения.

<div id="join-container_2"></div> 

CSS:

#join-container_2 { 
    position: relative; 
    width: 100vw; 
    height: 30vh; 
    background: url('http://placehold.it/1000x500') no-repeat; 
    background-size: 100% 100%; 
    background-position: center; 
    border: 1px black solid; 
} 

Пример: https://jsfiddle.net/mmru9m9o/ Играть с размером экрана.

Если вам действительно нужно сохранить высоту div в пикселях, вы можете начать думать о медиа-запросах.Вы проверите это здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries