Bootstrap Carousel не реагирует на весь экран

Question

Я работаю над карусели, которая составляет 50% от страницы. Это то же самое, что и в шаблоне бизнес-бутстрапа. Я попробовал несколько способов заставить изображения реагировать при повторной настройке страницы без везения. Изображения 1920px x 740px. 1-й из них правильно выровнен, когда он составляет половину страницы, но когда он находится в полноэкранном режиме, он отключается. Код на третьем изображении - это то, что было в шаблоне, и первые два были моими попытками исправить.

Карусель правильно прокручивается, кнопки работают и т. Д. Это просто отзывчивая часть, которую я не могу понять.

Это мое первое сообщение здесь, поэтому, если вам нужна дополнительная информация, пожалуйста, дайте мне знать. Также приносим извинения, если это неверно отформатировано. Благодарим вас за любую помощь &.

<div class="carousel-inner"> 
     <div class="item active"> 
      <img src=img/logo3.jpg alt="Logo" class="img-responsive"> 
      <div class="carousel-caption"> 
       <h2></h2> 
      </div> 
     </div> 
     <div class="item"> 
     <img src=img/logo2.jpg alt="Logo" class="img-responsive"> 
      <div class="carousel-caption"> 
       <h2>Caption 2</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div> 
      <div class="carousel-caption"> 
       <h2>Caption 3</h2> 
      </div> 
     </div> 
    </div> 

В шаблоне, который я использую, есть 2 файла .css. Вот CSS для карусели для обоих

/* Home Page Carousel */ 

header.carousel { 
height: 50%; 
} 

header.carousel .item, 
header.carousel .item.active, 
header.carousel .carousel-inner { 
height: 100%; 
} 

header.carousel .fill { 
width: 100%; 
height: 100%; 
background-position: center; 
background-size: cover; 
} 

И второе - я не включил средства управления CSS, так как эта часть работает.

.carousel { 
position: relative; 
} 
.carousel-inner { 
position: relative; 
width: 100%; 
overflow: hidden; 
} 
.carousel-inner > .item { 
position: relative; 
display: none; 
-webkit-transition: .6s ease-in-out left; 
    -o-transition: .6s ease-in-out left; 
     transition: .6s ease-in-out left; 
} 
.carousel-inner > .item > img, 
.carousel-inner > .item > a > img { 
line-height: 1; 
} 
@media all and (transform-3d), (-webkit-transform-3d) { 
.carousel-inner > .item { 
-webkit-transition: -webkit-transform .6s ease-in-out; 
    -o-transition:  -o-transform .6s ease-in-out; 
     transition:   transform .6s ease-in-out; 

-webkit-backface-visibility: hidden; 
     backface-visibility: hidden; 
-webkit-perspective: 1000; 
     perspective: 1000; 
} 
.carousel-inner > .item.next, 
.carousel-inner > .item.active.right { 
left: 0; 
-webkit-transform: translate3d(100%, 0, 0); 
     transform: translate3d(100%, 0, 0); 
} 
.carousel-inner > .item.prev, 
.carousel-inner > .item.active.left { 
left: 0; 
-webkit-transform: translate3d(-100%, 0, 0); 
     transform: translate3d(-100%, 0, 0); 
} 
.carousel-inner > .item.next.left, 
.carousel-inner > .item.prev.right, 
.carousel-inner > .item.active { 
left: 0; 
-webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0); 
} 
} 
.carousel-inner > .active, 
.carousel-inner > .next, 
.carousel-inner > .prev { 
display: block; 
} 
.carousel-inner > .active { 
left: 0; 
} 
.carousel-inner > .next, 
.carousel-inner > .prev { 
position: absolute; 
top: 0; 
width: 100%; 
} 
.carousel-inner > .next { 
left: 100%; 
} 
.carousel-inner > .prev { 
left: -100%; 
} 
.carousel-inner > .next.left, 
.carousel-inner > .prev.right { 
left: 0; 
} 
.carousel-inner > .active.left { 
left: -100%; 
} 
.carousel-inner > .active.right { 
left: 100%; 
} 

Answer 1

насчет изменения вашего класса:

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img { 
line-height: 1; 
} 

к:

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img { 
line-height: 1; 
display: block; 
max-width: 100%; 
height: auto; 
} 

и проверить его ?.