Bootstrap Column img background scaling

Question

У меня проблемы с кодом Bootstrap на http://goo.gl/ARUJz9.

В верхней части тела представляет собой контейнер:

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12" id="banner-hdr"> 
    /div> 
    </div> 
</div> 

CSS

#banner-hdr { 
    height: 405px; 
    background-image: url("../images/banner-bg.png"); 
    background-size: cover; 
    background-repeat: no-repeat; 
} 

Это имеет CSS фоновое изображение, которое не будет масштабироваться с сайтом, если смотреть на мобильном телефоне или таблетки. Если я использую прямой тег img, а затем добавляю отзывчивость, он все равно не работает, и изображение не заполняет весь блок баннера.

Как я могу написать это так, чтобы он правильно масштабировался с меньшими экранами?

Answer 1

Если нет ничего другого происходит за IMG заголовка, я бы на самом деле поставить отдельный внутри DIV и установить ширину: 100% примерно так:

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <img src="your picture" style="width:100%;"> 
    </div> 
    </div> 
</div> 

Таким образом, изображение заголовка будет увеличить/термоусадочная в пределах его размерности.