Изменение высоты фонового изображения в соответствии с размером экрана с использованием bootstrap/css

Question

У меня есть страница, в которой я использую бутстрап для проектирования. Теперь я использую сетки; Я хочу сохранить 8 столбцов для моего изображения и 4 столбца для текста. Так я следующий код: -

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-8"> 
      <div class="bg"></div> 
     </div> 
     <div class="col-md-4"> 
      hi how are you 
     </div> 
    </div> 
</div> 

Ниже приводится CSS для класса BG:

.bg { 
    background-image: url('../images/2.jpg'); 
    background-repeat: no-repeat; 
    background-position: center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height:690px; 
} 

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

Есть ли способ отрегулировать высоту изображения (ширина отлично работает) для дополнительных маленьких экранов, чтобы изображение и текст можно было видеть вместе без большой прокрутки?

Answer 1

сделать как this.give имя класса ДИВ как img-responsive и установить ширину и высоту, как ваш need.and поместить изображение внутри него и установить его ширину и высоту как это.

<div class="img-responsive" style="width: 300px;height: 300px;"> 
    <img style="width: 100%;height: 100%" src="http://www.intrawallpaper.com/static/images/1250654-for-laptop-nature.jpg"/> 
</div> 

Answer 2

Попробуйте использовать видовую-высоту в CSS3:

.bg { 
    height:100vh; 
} 

Answer 3

если вы хотите текст на картинке, вы можете сделать это:

@media (max-width: 480px) { 
    .bg { 
    position: absolute; 
    left: 0; 
    width: 100%; 
    } 
} 

если вы хотите половина верх изображение, половина дно текста, вы можете сделать это:

HTML

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-8"> 
     <div class="wrap"> 
     <div class="bg"></div> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     hi how are you 
    </div> 
    </div> 
</div> 

CSS

@media (max-width: 480px) { 
    .wrap { 
    position: relative; 
    padding-bottom: 50%; 
    } 

    .bg { 
    position: absolute; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    } 
} 

надеюсь, что это может помочь