web-dev-qa-db-ger.com

Bootstraps Karussell zentriert und reaktionsfähig machen?

Ich möchte, dass sich meine Karussellbilder in der Mitte (horizontal) befinden, was standardmäßig nicht der Fall ist. Ich folge der Lösung unter diesem Thema .

Bei dieser Lösung wird das Bild jedoch abgeschnitten anstatt skaliert, wenn das Karussell verkleinert und kleiner als das Bild ist.

Wie kann ich mein Bild sowohl zentrieren als auch bis zum Karussellartikel strecken?

htmlcssimagetwitter-bootstraptwitter-bootstrap-3
23
Luke Vo

Jetzt (auf Bootstrap 3 und 4) heißt es einfach: 

.carousel-inner img {
  margin: auto;
}
59
Olivier

Ich gehe davon aus, dass Sie Bilder unterschiedlicher Größe haben. Ich habe das selbst getestet, und es funktioniert so, wie Sie es beschreiben (immer zentriert, Bildbreiten entsprechend)

/*CSS*/
div.c-wrapper{
    width: 80%; /* for example */
    margin: auto;
}

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img{
width: 100%; /* use this, or not */
margin: auto;
}

<!--html-->
<div class="c-wrapper">
<div id="carousel-example-generic" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/600x400">
      <div class="carousel-caption">
        hello
      </div>
    </div>
        <div class="item">
      <img src="http://placehold.it/500x400">
      <div class="carousel-caption">
        hello
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/700x400">
      <div class="carousel-caption">
        hello
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div>
</div>

Dies verursacht einen "Sprung" aufgrund variabler Höhen. Um dies zu lösen, versuchen Sie Folgendes: Wählen Sie das höchste Bild einer Liste aus

Oder verwenden Sie Media-Query, um Ihre eigene feste Höhe festzulegen.

33
Ryan

Bei Bootstrap 4 fügen Sie einfach mx-auto zur Karussell-Image-Klasse hinzu. 

<div class="carousel-item">
  <img class="d-block mx-auto" src="http://placehold.it/600x400" />
</div>

Kombinieren Sie mit den Beispielen aus der Bootstrap-Karusselldokumentation nach Wunsch.

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

Diese einfache Lösung hat für mich funktioniert

3
FrickeFresh

Fügen Sie jedem Bild im Karussell-HTML-Code eine Klasse hinzu und wenden Sie dann mit css margin: 0 auto an.

3
Escendrix

füge das hinzu

.carousel .item img {
   left: -9999px;  /*important */
   right: -9999px;  /*important */
   margin: 0 auto;  /*important */
   max-width: none;  /*important */
   min-width: 100%;
   position: absolute;
}

Und natürlich muss eines der übergeordneten Divs eine Position haben: relativ, aber ich glaube, dass dies standardmäßig geschieht.

Sehen Sie es hier: http://paginacrestinului.ro/

3
Adrian Cumpanasu

Verwenden Sie dies auf Bootstrap 3:

#carousel-example-generic{
    margin:auto;
}
1
Vince2017

Hatte bei der Verwendung eines CMS ein ähnliches Problem wie dieses, löste es jedoch nicht mit der obigen Lösung. Was ich getan habe, um es zu lösen, stelle Folgendes in die zutreffende CSS:

background-size: cover

und für Platzierungszwecke, falls Sie Bootstrap verwenden, habe ich Folgendes verwendet:

background-position: center center /* or whatever position you wanted */
1
Joe Connor

Geben Sie dem Bild im Karussell eine Breite in%.

.item img {
    width:100%;
}
0
Kevinvhengst

Ich habe <div class="carousel" id...> in ein anderes div mit dem Klassencontainer (<div class="container"><div class="carousel" id="my-carousel">...</div></div>) gestellt. Das hat es auch gelöst.

0
ArtFranco

Keine der oben genannten Lösungen funktionierte für mich. Es ist möglich, dass andere Stile miteinander in Konflikt standen.

Für mich hat das folgende funktioniert, hoffentlich kann es jemand anderem helfen. Ich benutze Bootstrap 4.

.carousel-inner img {       
   display:block;
   height: auto; 
   max-width: 100%;
}
0
Gabriel Gates

in bootstrap v4 zentriere und fülle ich das karussell img mit dem bildschirm aus

<img class="d-block mx-auto" max-width="100%" max-height="100%">

ziemlich sicher, dass die Höhe oder Breite der übergeordneten Elemente festgelegt werden muss

html,body{height:100%;}
.carousel,.carousel-item,.active{height:100%;}
.carousel-inner{height:100%;}
0
austin