L'immagine di carosello non riempie la larghezza nel bootstrap 3

Question

Sono così nuovo in questa roba reattiva. Sto cercando di utilizzare il carousel del nuovo bootstrap 3 e per qualche motivo, l'immagine non riempie la larghezza della giostra. Tutte le immagini hanno la stessa esatta dimensione (1000x395) e non importa quello che faccio, non si riempie fino in fondo. Qualsiasi aiuto è molto apprezzato !!! Ecco il codice che sto utilizzando e uno screenshot:

<div class="row"> 
    <div class="col-md-12"> 

     <div id="carousel" class="carousel slide"> 
     <ol class="carousel-indicators"> 
      <li data-target="#carousel" data-slide-to="0" class="active"></li> 
      <li data-target="#carousel" data-slide-to="1"></li> 
      <li data-target="#carousel" data-slide-to="2"></li> 
      <li data-target="#carousel" data-slide-to="3"></li> 
      <li data-target="#carousel" data-slide-to="4"></li> 
      <li data-target="#carousel" data-slide-to="5"></li> 
      <li data-target="#carousel" data-slide-to="6"></li> 
      <li data-target="#carousel" data-slide-to="7"></li> 
      <li data-target="#carousel" data-slide-to="8"></li> 
      <li data-target="#carousel" data-slide-to="9"></li> 
     </ol> 

     <div class="carousel-inner"> 

      <div class="item active"> 
      <img src="/images/temp/1.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/2.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/3.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/4.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/5.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/6.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/7.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/8.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/9.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/10.jpg" class="img-responsive"> 
      </div> 

     </div> 

     <a class="left carousel-control" href="#carousel" data-slide="prev"> 
      <span class="icon-prev"></span> 
     </a> 
     <a class="right carousel-control" href="#carousel" data-slide="next"> 
      <span class="icon-next"></span> 
     </a> 
     </div> 

    </div> <!-- /col-md-12 --> 
</div> <!-- /row --> 

Answer 1

.img-responsive impostare l'immagine al massimo il 100% della sua dimensione originale. Il tuo class="col-md-12" è di 1200 px nella grande griglia. Hai bisogno di immagini più grandi> = 1200px o riduci i tuoi siti.

Aggiungi la query multimediale di seguito dopo che il css di Bootstrap porterà la larghezza massima del tuo sito a 940px;

@media (min-width: 1200px) { 
    .container { 
    width: 940px; 
    } 

Answer 2

Aggiungi width="100%" ad ogni linea img: <img src="/images/temp/2.jpg" width="100%"> che farà aumentare l'altezza proporzionalmente per mantenere le proporzioni.