web-dev-qa-db-fra.com

Rendre le carrousel de Bootstrap à la fois central et réactif?

Je veux que mes images du carrousel soient au centre (horizontalement), ce qui n'est pas le cas par défaut. Je suis la solution à ce sujet .

Cependant, avec cette solution, lorsque le carrousel est redimensionné et plus petit que l'image, l'image est recadrée au lieu d'être redimensionnée par défaut.

Comment puis-je centrer mon image tout en la laissant s'étirer jusqu'à l'élément du carrousel?

htmlcssimagetwitter-bootstraptwitter-bootstrap-3
23
Luke Vo

Maintenant (sur Bootstrap 3 et 4) c'est simplement: 

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

Je suppose que vous avez des images de tailles différentes. J'ai testé cela moi-même et cela fonctionne comme vous le décrivez (toujours centré, largeur des images appropriée)

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

Cela crée un "saut" dû aux hauteurs variables ... pour résoudre ce problème, essayez quelque chose comme ceci: Sélectionnez la plus haute image d'une liste

Ou utilisez media-query pour définir votre propre hauteur fixe.

33
Ryan

Sur Bootstrap 4, ajoutez simplement mx-auto à la classe d'images de votre carrousel. 

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

Combinez avec les échantillons de la documentation de bootstrap carousel comme vous le souhaitez.

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

Cette solution simple a fonctionné pour moi

3
FrickeFresh

Ajoutez une classe à chaque image dans le code html du carrousel, puis avec css appliquez margin: 0 auto.

3
Escendrix

ajoute ça

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

Et bien sûr, l’un des parents doit avoir une position: relative, mais je crois que oui.

Voir ici: http://paginacrestinului.ro/

3
Adrian Cumpanasu

En utilisant ceci sur bootstrap 3:

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

Avait un problème très similaire à cela tout en utilisant un CMS, mais cela ne résolvait pas avec la solution ci-dessus. Ce que j’ai fait pour le résoudre est mis comme suit dans le css applicable:

background-size: cover

et à des fins de placement dans le cas où vous utilisez bootstrap, j'ai utilisé:

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

Essayez de donner une largeur en% à l'image dans le carrousel?

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

J'ai placé le <div class="carousel" id...> dans un autre div avec le conteneur de classe (<div class="container"><div class="carousel" id="my-carousel">...</div></div>). Cela l'a résolu aussi.

0
ArtFranco

Aucune des solutions ci-dessus n'a fonctionné pour moi. Il est possible qu'il y ait eu d'autres styles en conflit.

Pour moi, ce qui suit a fonctionné, j'espère que cela pourra aider quelqu'un d'autre. J'utilise bootstrap 4.

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

dans bootstrap v4, je centre et remplis le carrousel img à l'écran à l'aide de

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

à peu près sûr que cela nécessite la hauteur ou la largeur des éléments parents

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