Блог

Я пытаюсь создать изображение баннера, охватывающее 100% ширины экрана Пример того, чего я хочу достичь, можно найти здесь:

http://www.aha.io/roadmapping/where-aha-fits

Посмотрите на него во весь экран. Баннер имеет 100% ширины и, возможно, 15% высоты экрана.

При уменьшении размера окна баннер по-прежнему занимает 100% ширины экрана, но, кажется, обрезает левый размер, я думаю, и уменьшается по высоте, сохраняя высоту экрана около 15%.

Я создал демонстрацию того, что я пытаюсь сделать здесь:

http://www.bootply.com/Hrxwy8BjTT

В итоге я получаю в «мобильной» версии очень тонкий баннер.

Как я могу немного обрезать его и сохранить около 10% (в моем случае) высоты экрана (и не создавать полосу прокрутки)?

Это было бы хорошим случаем для использования медиа-запросов.Приведенный ниже код нацелен на определенную ширину в шаблоне для мобильных устройств. Таким образом, стиль для #background зависит от ширины устройства.

 #background {
  background: url(http://snowdebts.com/images/banner-thin.png);
  background-position: center;
  background-size: cover;
  height: 225px; width: 100%;
}

@media (min-width: 480px) {
    #background { height: 200px; }
}

@media (min-width: 768px) {
    #background { height: 150px; }
}

@media (min-width: 992px) {
    #background { height: 100px; }
}
  

Я взял на себя смелость удалить ваш тег изображения и вместо этого установить его в CSS. Итак, для вашего HTML вам нужно следующее:

  <div class="tab-content">
   <div id="background">

   </div>
   <div style="padding-left: 20px;">
     Hello
   </div>
</div>
  

Вы можете изменить высоту в процентах или фиксированную ширину в зависимости от того, что вам нужно. Кроме того, поскольку мы настроили изображение в качестве фона для элемента div, нам не нужно беспокоиться о полосе прокрутки, только о размере div.