Попытка получить карусель Bootstrap для пропорционального изменения размера

Question

Я пытаюсь получить карусель Bootstrap 3, чтобы уменьшить размер экрана, уменьшив размер экрана - т. Е. Я хочу, чтобы он оставался тем же, что и его размер. Из коробки он просто сжимается (получится уже, но не короче). Я получил изображение, чтобы делать то, что хочу, но фон карусели не следует. Я пробовал всевозможные вещи, но не могу понять. Любой намек был бы оценен. Благодаря!

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

/* CUSTOMIZE THE CAROUSEL 
 
-------------------------------------------------- */ 
 

 
/* Carousel base class */ 
 
.carousel { 
 
    max-height: 500; 
 
    max-width: 753px; 
 
    width: auto; 
 
    height: auto; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-bottom: 60px; 
 
    margin-top: 50px; 
 

 
} 
 
/* Since positioning the image, we need to help out the caption */ 
 
/*.carousel-caption { 
 
    z-index: 10; 
 
}*/ 
 

 
/* Declare heights because of positioning of img element */ 
 
.carousel .item { 
 
    width: 100%; 
 
    height: 500px; 
 
    min-height: 100px; 
 
    background-color: #777; 
 
} 
 

 
.carousel-inner > .item > img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    min-width: 100%; 
 
    width: auto; 
 
    height: auto; 
 
}

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
     <!-- Indicators --> 
 
     <ol class="carousel-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
 
     </ol> 
 
     <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
      <img class="first-slide" src="img/htff-1.jpg" alt="First slide"> 
 
      <div class="container"> 
 
      <!-- <div class="carousel-caption"> 
 
       <h1>Example headline.</h1> 
 
       <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p> 
 
      </div> --> 
 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <img class="second-slide" src="img/lostDivision-025.JPG" alt="Second slide"> 
 
      <div class="container"> 
 
      <!-- <div class="carousel-caption"> 
 
       <h1>Another example headline.</h1> 
 
       <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
 
       <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> 
 
      </div> --> 
 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <img class="third-slide" src="img/sballard_01.jpg" alt="Third slide"> 
 
      <div class="container"> 
 
      <!-- <div class="carousel-caption"> 
 
       <h1>One more for good measure.</h1> 
 
       <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
 
       <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> 
 
      </div> --> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
     </a> 
 
     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
     </a> 
 
    </div><!-- /.carousel -->

Answer 1

Вы загружаете файлы .js в правильной последовательности?

Я загрузил их в этой последовательности .... и ваш код работает отлично.

1. bootstrap.min.css
2. JQuery-2.1.3.min.js
3. bootstrap.min.js

Answer 2

Попробуйте добавить height:100% к последнему селектору. Это приведет к тому, что ваш контейнер сохранит свою форму при изменении размера браузера при изменении размера браузера.