Das Bootstrap-Karussell-Image wird nicht richtig ausgerichtet

Bitte schauen Sie sich das folgende Bild an, wir verwenden ein Bootstrap-Karussell, um die Bilder zu drehen. Wenn die Fensterbreite jedoch groß ist, wird das Bild nicht richtig am Rand ausgerichtet.

Das von Bootstrap bereitgestellte Karussellbeispiel funktioniert jedoch immer einwandfrei, unabhängig von der Breite des Fensters. Dem Code folgen.

Kann jemand erklären, warum sich Karussell anders verhält? Hat dies etwas mit der Bildgröße zu tun oder fehlt eine Bootstrap-Konfiguration?

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

Die Lösung besteht darin, diesen CSS-Code in Ihre benutzerdefinierte CSS-Datei einzufügen:

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

Fügen Sie mit Bootstrap 3 einfach die Responsive- und Center-Klassen hinzu:

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

Dadurch wird die Bildgröße automatisch geändert und das Bild zentriert.

Bearbeiten:

Fügen Sie mit Bootstrap 4 einfach die img-fluidKlasse hinzu

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

Ich hatte das gleiche Problem und löste es folgendermaßen: Es ist möglich, Nicht-Bildinhalte in Carousel einzufügen, damit wir sie verwenden können. Sie sollten zuerst einfügen div.inner-item(wo Sie die Ausrichtung in der Mitte vornehmen) und dann ein Bild in dieses Div einfügen.

Hier ist mein Code (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>

Und mein CSS-Code (.scss):

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

Während die Antwort von vekozlov in Bootstrap 3 funktioniert, um Ihr Bild zu zentrieren , bricht sie, wenn das Karussell verkleinert wird: Das Bild behält seine Größe bei, anstatt es mit dem Karussell zu verkleinern.

Führen Sie dies stattdessen auf dem Karussell der obersten Ebene aus div:

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

Dadurch wird das gesamte Karussell zentriert und verhindert, dass es über die Breite Ihrer Bilder hinauswächst (dh 900 Pixel oder was auch immer Sie einstellen möchten). Wenn das Karussell jedoch verkleinert wird, werden die Bilder damit verkleinert.

Sie sollten diese Styling-Informationen natürlich in Ihre CSS / LESS-Datei einfügen.

In Bootstrap 4 können Sie mx-autoIhrer Klasse eine Klasse hinzufügenimg Tag .

Wenn Ihr Bild beispielsweise eine Breite von 75% hat, sollte es folgendermaßen aussehen:

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

Bootstrap übersetzt automatisch mx-autoin:

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

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

Es könnte etwas mit Ihren Stilen zu tun haben. In meinem Fall verwende ich einen Link innerhalb des übergeordneten "item" -Divs, daher musste ich mein Stylesheet ändern, um Folgendes zu sagen:

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

unter dem bereits vorhandenen Boostrap-Code:

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

und mein Bild sieht aus wie:

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

Ich denke ich habe eine Lösung:

In Ihrem Blatt Seite persönlichen Stil, weisen Sie die Breite und Höhe passen Ihre Bildabmessungen.

Erstellen Sie eine zusätzliche separate "Klasse" in diesem oberen Bereich, die den Raum mit Spannweiten anpasst ... (siehe unten)

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

Rufen Sie in Ihrem eigenen Stylesheet "carousel" (oder ein beliebiges Etikett) auf, ohne die Datei bootstrap.css zu berühren, um die Breite und Höhe Ihrer Originalbilder anzupassen!

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

}}

In meinem Fall verwende ich kleine 320x200-Bilder zum Karussellieren. Es gibt wahrscheinlich voreingestellte Dimensionen in der bootstrap.css, aber ich mag es nicht, diese zu ändern, damit ich versuchen kann, mit zukünftigen Versionen auf dem neuesten Stand zu bleiben. Hoffe das hilft ~~

Ich habe das gleiche Problem mit Ihnen. Basierend auf dem Hinweis von @thuliha haben die folgenden Codes meine Probleme gelöst.

htmlÄndern Sie in der Datei das folgende Beispiel:

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

In der carousel.css, ändern Sie die Klasse:

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

Versuche dies

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

Haben Ihre Bilder genau eine Breite von 460 Pixel wie span6? In meinem Fall habe ich bei unterschiedlichen Bildgrößen meinen Bildern ein Höhenattribut zugewiesen, um sicherzustellen, dass sie alle dieselbe Höhe haben und die Größe des Karussells zwischen den Bildern nicht geändert wird.

Versuchen Sie in Ihrem Fall, eine Höhe festzulegen, damit das Verhältnis zwischen dieser Höhe und der Breite Ihres Karussell-Innenbereichs dem Aspektverhältnis Ihrer Bilder entspricht

Die Lösung von @Art L. Richards hat nicht funktioniert. Jetzt in bootstrap.css ist der ursprüngliche Code so geworden.

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

Der Code von @ rnaka530 würde die flüssige Funktion von Bootstrap beeinträchtigen.

Ich habe keine gute Lösung, aber ich habe sie behoben. Ich habe das Karussellbeispiel des Bootstraps sehr genau beobachtet. Http://twitter.github.com/bootstrap/javascript.html#carousel .

Ich finde heraus, dass die Bildbreite größer sein muss als die Gitterbreite. In span9ist die Breite bis zu 870 Pixel groß, daher müssen Sie ein Bild vorbereiten, das größer als 870 Pixel ist. Wenn Sie mehr Container außerhalb des Bilds haben, da der gesamte Container einen Rand oder Rand hat, können Sie Bilder mit geringerer Breite verwenden.

Für das Karussell glaube ich, dass alle Bilder genau die gleiche Höhe und Breite haben müssen.

Wenn Sie von Bootstrap auf die Gerüstseite zurückgreifen, bin ich mir ziemlich sicher, dass span16 = 940px ist. In diesem Sinne können wir davon ausgehen, dass Sie eine haben

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

Also ja, Sie müssen vorsichtig sein, wenn Sie den Bereich innerhalb einer Zeile festlegen, denn wenn die Bildbreite zu groß ist, wird Ihr Div in die nächste "Zeile" verschoben, und das macht keinen Spaß: P.

Link 1

Fügen Sie dies in die übergeordnete CSS-Div-Klasse ein, in der sich Ihr Karussell befindet.

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