Immagine del carosello di bootstrap non allineata correttamente

Question

Si prega di dare un'occhiata alla seguente immagine, stiamo usando il carosello di bootstrap per ruotare le immagini. Tuttavia, quando la larghezza della finestra è grande, l'immagine non si allinea correttamente con il bordo.

Ma l'esempio di carousel fornito dal bootstrap funziona sempre correttamente, indipendentemente dalla larghezza della finestra. Seguendo il codice.

Qualcuno può spiegare perché la giostra si comporta in modo diverso? Manca qualcosa con la dimensione dell'immagine o qualche configurazione di bootstrap?

<section id="carousel"> 
<div class="hero-unit span6 columns"> 
    <h2>Welcome to TACT !</h2> 
    <div id="myCarousel" class="carousel slide" > 
     <!-- Carousel items --> 
     <div class="carousel-inner"> 
     <div class="item active" > 
      <img alt="" src="/eboxapps/img/3pp-1.png"> 
      <div class="carousel-caption"> 
       <h4>1. Need a 3rd party jar?</h4> 
      </div> 
     </div> 
     <div class="item"> 
      <img alt="" src="/eboxapps/img/3pp-2.png"> 
      <div class="carousel-caption"> 
       <h4>2. Create Request</h4> 
      </div> 
     </div> 
     <div class="item"> 
      <img alt="" src="/eboxapps/img/3pp-3.png"> 
      <div class="carousel-caption"> 
       <h4>3. What happens?</h4> 
      </div> 
     </div> 
     <div class="item"> 
      <img alt="" src="/eboxapps/img/3pp-4.png"> 
      <div class="carousel-caption"> 
       <h4>4. Status is Emailed</h4> 
      </div> 
     </div> 
     </div> 
     <!-- Carousel nav --> 
     <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
     <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
    </div> 
</div> 

Answer 1

Fa le immagini hanno esattamente una larghezza 460PX come lo span6? Nel mio caso, con diverse dimensioni di immagine, inserisco un attributo height sulle mie immagini per assicurarmi che siano tutte della stessa altezza e che il carosello non venga ridimensionato tra le immagini.

Nel tuo caso, prova a impostare un'altezza in modo che il rapporto tra questa altezza e la larghezza del div giostra interiore è lo stesso del aspectRatio delle immagini

Answer 2

Si potrebbe avere qualcosa a che fare con gli stili . Nel mio caso, io sto usando un link all'interno del genitore "voce" div, così ho dovuto cambiare il mio foglio di stile per dire quanto segue:

.carousel .item a > img { 
    display: block; 
    line-height: 1; 
} 

sotto il codice di bootstrap preesistente:

.carousel .item > img { 
    display: block; 
    line-height: 1; 
} 

e la mia immagine si presenta come:

<div class="active item" id="2"><a href="http://epdining.com/eats.php?place=TestRestaurant1"><img src="rimages/2.jpg"></a><div class="carousel-caption"><p>This restaurant is featured blah blah blah blah blah.</p></div></div> 

Answer 3

penso di avere una soluzione:

Nel vostro sh stile personale Pagina eet, assegnare la larghezza & altezza a corrispondere a le dimensioni dell'immagine.

Creare un ulteriore "di classe" separata sul div superiore che si appropria dello spazio con luci ... (di seguito riportati)

 <div class="span6 columns" class="carousel"> 
      <div id="myCarousel" class="carousel slide"> 
       <div class="carousel-inner"> 
       <div class="item active"> 

senza toccare il bootstrap.css, nel proprio foglio di stile, chiamata " carosello "(o qualunque etichetta tu scelga) per abbinare la larghezza e l'altezza del tuo pix originale!

.carousel  { 
      width: 320px; 
      height: 200px; 

}

Quindi, nel mio caso, io sto usando le immagini di piccole dimensioni 320x200 a carosello con. Probabilmente ci sono dimensioni preimpostate nel bootstrap.css, ma non mi piace cambiarlo, così posso provare a rimanere aggiornato con le versioni future. Spero che questo aiuti ~~

Answer 4

Per il carosello, credo che tutte le immagini debbano essere esattamente della stessa altezza e larghezza.

Inoltre, quando si fa riferimento alla pagina di scaffolding da bootstrap, sono abbastanza sicuro che span16 = 940px.Con questo in mente, penso che possiamo supporre che se si dispone di un

<div class="row"> 
    <div class="span4"> 
     <!--left content div guessing around 235px in width --> 
    </div> 
    <div class="span8"> 
     <!--right content div guessing around 470px in width --> 
    </div> 
</div> 

Quindi sì, bisogna stare attenti quando si imposta lo spazio campate all'interno di una riga, perché se la larghezza dell'immagine è di grandi dimensioni, trasmetterà il tuo div nel successivo "riga" e che non è divertente: P

Link 1

Answer 5

soluzione @Art s' L. Richards non ha funzionato. ora in bootstrap.css, il codice originale è diventato così.

.carousel .item > img { 
    display: block; 
    line-height: 1; 
} 

Il codice di @rnaka530 interrompe la funzionalità del bootstrap.

Non ho una buona soluzione ma l'ho risolto. Ho osservato molto attentamente l'esempio della giostra del bootstrap http://twitter.github.com/bootstrap/javascript.html#carousel.

Scopro che la larghezza dell'immagine deve essere maggiore della larghezza della griglia. In span9, la larghezza è fino a 870 px, quindi è necessario preparare un'immagine più grande di 870px. Se hai più contenitore all'esterno dell'img, dato che tutto il contenitore ha qualcosa di bordo o margine, puoi usare l'immagine con una larghezza minore.

Answer 6

Ho affrontato lo stesso problema e l'ho risolto in questo modo: È possibile inserire contenuto non immagine in Carousel, quindi possiamo utilizzarlo. Per prima cosa inserire div.inner-item (dove si effettuerà l'allineamento del centro), quindi inserire l'immagine all'interno di questo div.

Ecco il mio codice (Ruby):

<div id="myCarousel" class="carousel slide"> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
     <div class="active item"> 
      <%= image_tag "couples/1.jpg" %> 
     </div> 
     <% (2..55).each do |t|%> 
      <div class="item"> 
       <div class='inner-item'> 
        <%= image_tag "couples/#{t}.jpg" %> 
       </div> 
      </div> 
     <% end -%> 
    </div> 
    <!-- Carousel nav --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div> 

E il mio css-code (.scss):

.inner-item { 
    text-align: center; 
    img { 
     margin: 0 auto; 
    } 
} 

Answer 7

Inserire questo sul div class css genitore in cui il vostro carosello è.

<div class="parent_div"> 
    <div id="myCarousel" class="carousel slide"> 
      <div class="carousel-inner"> 
       <div class="item active"> 
       <img src="assets/img/slider_1.png" alt=""> 
       <div class="carousel-caption"> 
       </div> 
       </div> 
      </div> 
    </div>  
</div> 

CSS

.parent_div { 
margin: 0 auto; 
min-width: [desired width]; 
max-width: [desired width]; 
} 

Answer 8

La soluzione è quella di mettere quel codice CSS nel file css personalizzato

.carousel-inner > .item > img { margin: 0 auto; }

Answer 9

Mentre vekozlov 's risposta sarà lavorare in Bootstrap 3 per centrare la vostra immagine, si romperà quando la giostra viene ridimensionata: l'immagine mantiene le sue dimensioni invece di ridursi con la giostra.

invece, farlo sul livello superiore carosello div:

<div id="my-carousel" class="carousel slide" 
    style="max-width: 900px; margin: 0 auto"> 
    ... 
</div> 

Ciò centrerà l'intera giostra e impedirgli di crescere oltre la larghezza delle vostre immagini (vale a dire 900 px o qualsiasi altra cosa che si desidera impostare a). Tuttavia, quando il carosello viene ridimensionato, le immagini scendono verso il basso con esso.

Si consiglia di inserire queste informazioni sullo stile nel file CSS/LESS, naturalmente.

Answer 10

Con bootstrap 3, basta aggiungere le classi reattive e centrale:

<img class="img-responsive center-block" src="img/....jpg" alt="First slide"> 

Questo fa automaticamente il ridimensionamento delle immagini, e centra l'immagine.

Edit:

Con bootstrap 4, è sufficiente aggiungere il img-fluid classe

<img class="img-fluid" src="img/....jpg"> 

Answer 11

Sto affrontando lo stesso problema con te. Sulla base del suggerimento di @thuliha, i seguenti codici hanno risolto i miei problemi.

Nel file html, modificare come il seguente esempio:

<img class="img-responsive center-block" src=".....png" alt="Third slide"> 

Nel carousel.css, modificare la classe:

.carousel .item { 
    text-align: center; 
    height: 470px; 
    background-color: #777; 
} 

Answer 12

Prova questa

.item img{ 
     max-height: 300px; 
     margin: auto; 
    }