L'immagine del carosello Bootstrap non si allinea correttamente

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

Ma l'esempio del carosello fornito da bootstrap funziona sempre bene, indipendentemente dalla larghezza della finestra. Seguendo il codice.

Qualcuno può spiegare perché la giostra si sta comportando in modo diverso? Ha qualcosa a che fare con la dimensione dell'immagine o manca 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>

La soluzione è inserire questo codice CSS nel tuo file CSS personalizzato:

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

Con bootstrap 3, aggiungi semplicemente le classi reattive e centrali:

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

Questo esegue automaticamente il ridimensionamento dell'immagine e centra l'immagine.

Modificare:

Con bootstrap 4, aggiungi semplicemente la img-fluidclasse

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

Ho affrontato lo stesso problema e l'ho risolto in questo modo: è possibile inserire contenuti non di immagine in Carousel, quindi possiamo usarli. Dovresti prima inserire div.inner-item(dove farai l'allineamento al 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 codice css (.scss):

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

Anche se la risposta di vekozlov funzionerà in Bootstrap 3 per centrare la tua immagine, si interromperà quando il carosello viene ridimensionato: l'immagine mantiene le sue dimensioni invece di ridimensionarsi con il carosello.

Invece, fallo nel carosello di primo livello div:

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

Questo centrerà l'intero carosello e impedirà che cresca oltre la larghezza delle tue immagini (cioè 900 px o qualunque cosa tu voglia impostarlo). Tuttavia, quando il carosello viene ridimensionato, le immagini vengono ridimensionate con esso.

Ovviamente dovresti inserire queste informazioni di stile nel tuo file CSS / LESS.

In Bootstrap 4, puoi aggiungere una mx-autoclasse al tuo imgtag.

Ad esempio, se la tua immagine ha una larghezza del 75%, dovrebbe apparire così:

<img class="d-block w-75 mx-auto" src="image.jpg" alt="First slide">

Bootstrap si tradurrà automaticamente mx-autoin:

ml-auto, .mx-auto {
    margin-left: auto !important;
}

.mr-auto, .mx-auto {
    margin-right: auto !important;
}

Potrebbe avere qualcosa a che fare con i tuoi stili. Nel mio caso, sto utilizzando un collegamento all'interno del div "elemento" principale, quindi ho dovuto cambiare il mio foglio di stile per dire quanto segue:

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

sotto il codice boostrap preesistente:

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

e la mia immagine è simile a:

<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>

Penso di avere una soluzione:

Nella pagina del foglio di stile personale, assegna la larghezza e l'altezza in modo che corrispondano alle dimensioni dell'immagine.

Crea una "classe" separata aggiuntiva su quel div superiore che si appropria dello spazio con campate ... (mostrato di seguito)

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

Senza toccare bootstrap.css, nel tuo foglio di stile, chiama "carousel" (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, sto usando piccole immagini 320x200 con cui eseguire il carosello. Probabilmente ci sono dimensioni preimpostate in bootstrap.css, ma non mi piace cambiarlo in modo da poter provare a rimanere aggiornato con le versioni future. Spero che questo aiuti ~~

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

Nel htmlfile, modifica come nell'esempio seguente:

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

In carousel.css, modifica la classe:

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

Prova questo

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

Le tue immagini hanno esattamente una larghezza di 460 px rispetto allo span6? Nel mio caso, con immagini di dimensioni diverse, ho inserito un attributo altezza sulle mie immagini per assicurarmi che siano tutte della stessa altezza e il carosello non si ridimensiona tra le immagini.

Nel tuo caso, prova a impostare un'altezza in modo che il rapporto tra questa altezza e la larghezza del div interno del carosello sia lo stesso dell'aspectRatio delle tue immagini

La soluzione di @Art 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 interromperà la fluida funzionalità di bootstrap.

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

Ho scoperto che la larghezza di img deve essere maggiore della larghezza della griglia. In span9, la larghezza è fino a 870 px, quindi devi preparare un'immagine più grande di 870 px. Se hai più contenitori all'esterno di img, poiché tutto il contenitore ha un bordo o un margine, puoi usare un'immagine con una larghezza inferiore.

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

Inoltre, quando torni alla pagina dello scaffolding da bootstrap, sono abbastanza sicuro che span16 = 940px. Con questo in mente, penso che possiamo presumere che se hai un file

<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ì, devi stare attento quando imposti lo spazio delle estensioni all'interno di una riga perché se la larghezza dell'immagine è troppo grande, invierà il tuo div nella "riga" successiva e non è divertente: P

Collegamento 1

Inseriscilo nella classe div genitore css dove si trova il tuo carousel.

<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];
}