Das Bootstrap-Karussell-Image wird nicht richtig ausgerichtet

93

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>

Karussellbild

Nambi
quelle
Sind alle Ihre Bilder gleich breit? Strecken sie sich auch bis zu ihrem .span6Container?
Andres Ilich
1
Alle meine Bilder haben die gleiche Breite und Höhe. Alle scheinen sich zu dehnen. Um dies zu beheben, habe ich versucht, Bilder zu erstellen, die dieselbe Größe haben wie das Bootstrap-Beispiel. Aber es hat die Größe völlig durcheinander gebracht. Ich denke also, dass es einen Zusammenhang zwischen der Bildgröße und dem CSS-Stil gibt. In der Dokumentation wird die Beziehung jedoch nicht vollständig beschrieben.
Nambi
Ich bin auch auf dieses Problem gestoßen, und es war ziemlich frustrierend. Für mich stellte sich heraus, dass dies geschah, weil der Div, der das Karussell enthielt, eine feste Breite hatte, die breiter als das Karussell war.
WuTheFWasThat
Vielleicht wäre es eine gute Idee gewesen, die E-Mail-Adresse zu verstecken :)
tgdn

Antworten:

159

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

.carousel-inner > .item > img {
  margin: 0 auto;
}
atrepp
quelle
1
das hat bei mir funktioniert! Ich habe die Vekozlov-Methode ausprobiert, aber sie hat nicht funktioniert. Das funktioniert! Vielen Dank
ah-shiang han
Die Höhe des Karussells ändert sich für verschiedene Bildhöhen , sodass Sie eine feste Breite in CSS definieren müssen.
QuantumHive
Super! Hoffentlich ist dies nur eine "eingebaute" BS-Klasse wie .carousel-img-center oder so.
CodeFinity
Ich werde versuchen, die Marge, aber ich fand, dass das Hinzufügen height:nonezu .carousel-inner > .item > imgbesseren Ergebnissen als die Standardeinstellung height:500px
CrandellWS
Sie sollten .carousel-inner > .carousel-item > img { margin: 0 auto; }für Bootstrap 4 tun.
Expenzor
125

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">
Thouliha
quelle
9
Versuchte die am besten bewerteten Lösungen ohne Erfolg. Dies ist viel sauberer, einfacher und funktioniert. Danke dir!
Kyle
2
Schlank und sauber. Danke
Chiefenne
2
Perfekt, danke. Ich schwöre, ich habe das schon einmal gegoogelt und keine Antwort bekommen, das hat sofort funktioniert.
Chud37
Ich verwende Bootstrap 4 und die img-fluid-Klasse zentriert die Bilder nicht. Sie sind alle gerechtfertigt.
Malchesador
2
@iaacp nur text-centerzum <div class="carousel-item">Start-Tag hinzufügen
Deanwilliammills
18

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;
    }
}
vekozlov
quelle
Dieses CSS funktionierte hervorragend für mich, zusätzlich zur Festlegung der Höhe der Bilder im Karussell
SporkInventor
6

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.

Daniel AA Pelsmaeker
quelle
3

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;
}
Hass
quelle
1

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>
Art L. Richards
quelle
1

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

rnaka530
quelle
1

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;
}
Tung
quelle
1

Versuche dies

    .item img{
      max-height: 300px;
      margin: auto;
    }
Lala
quelle
Willkommen bei StackOverflow! Ihre Antwort könnte sehr nützlich sein, wenn Sie ein wenig erklären würden, wie dies die Frage löst. Nur-Code-Antworten werden auf SO nicht so gut aufgenommen.
René Vogt
0

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

Seb Cesbron
quelle
es hilft nicht. Denken Sie, dass das Bildformat wichtig ist? Das Bootstrap-Beispiel verwendet JPEG-Dateien, wobei ich PNG-Dateien verwende. Macht das einen Unterschied?
Nambi
0

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.

Kevin Tong
quelle
0

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

rnaka530
quelle
0

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];
}
Jay Tiedra
quelle