it-swarm.com.de

Bootstrap Karussellbild wird nicht richtig ausgerichtet

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

Aber das Karussell-Beispiel von bootstrap funktioniert immer, egal wie breit das Fenster ist. Folgen Sie dem Code.

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

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

carousel image

89
Nambi

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

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

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 das img-fluid Klasse

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

Ich hatte das gleiche Problem und löste es auf folgende Weise: Es ist möglich, Nicht-Bild-Inhalte in Carousel einzufügen, damit wir sie verwenden können. Sie sollten zuerst div.inner-item (wo Sie die Mittelausrichtung vornehmen), und fügen Sie dann das Bild in dieses Div ein.

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;
    }
}
18
vekozlov

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

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

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

Dies zentriert das gesamte Karussell und verhindert, dass es über die Breite Ihrer Bilder hinaus wächst (d. H. 900 px oder auf was auch immer Sie es 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 aufnehmen.

Versuchen Sie dies

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

Ich stehe mit Ihnen vor dem gleichen Problem. Basierend auf dem Hinweis von @thuliha haben die folgenden Codes meine Probleme gelöst.

Ändern Sie in der Datei html das folgende Beispiel:

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

In dem carousel.css, ändere die Klasse:

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

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

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

unter dem bereits existierenden Boostrap-Code:

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

und mein bild sieht so aus:

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

Ich denke ich habe eine Lösung:

Weisen Sie auf Ihrer persönlichen Stylesheet-Seite die Breite und Höhe passend Ihren Bildabmessungen zu.

Erstellen Sie eine zusätzliche separate "Klasse" in diesem oberen Div, die den Raum mit den Überspannungen 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, ohne die Datei bootstrap.css zu berühren, in Ihrem eigenen Stylesheet "carousel" (oder ein beliebiges Label, das Sie auswählen) auf, 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, das zu ändern, damit ich versuchen kann, bei zukünftigen Releases auf dem neuesten Stand zu bleiben. Hoffe das hilft ~~

1
rnaka530

Haben Ihre Bilder genau eine Breite von 460px wie die von span6? In meinem Fall habe ich bei unterschiedlichen Bildgrößen ein Höhenattribut für meine Bilder festgelegt, um sicherzustellen, dass alle die gleiche 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, sodass das Verhältnis zwischen dieser Höhe und der Breite Ihres Karussell-Innenteils dem Seitenverhältnis Ihrer Bilder entspricht

0
Seb Cesbron

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. Vor diesem Hintergrund 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 Abstand innerhalb einer Zeile einstellen, denn wenn die Bildbreite zu groß ist, wird Ihr Div in die nächste "Zeile" verschoben, und das macht keinen Spaß: P

Link 1

0
rnaka530

In Bootstrap 4 können Sie Ihrem Tag img die Klasse mx-auto Hinzufügen.

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-auto In:

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

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

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

@ rnaka530s Code würde das flüssige Feature von Bootstrap sprengen.

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. Im span9, Breite ist bis zu 870px, Sie müssen also ein Bild vorbereiten, das größer als 870px ist. Wenn sich außerhalb des Bilds mehr Container befinden, da alle Container einen Rand oder Rand haben, können Sie Bilder mit geringerer Breite verwenden.

0
Kevin Tong

Fügen Sie dies in die Klasse css parent div 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];
}
0
Jay Tiedra