web-dev-qa-db-fra.com

Twitter Bootstrap: Ayez des images de carrousel sur toute la largeur et la hauteur

cela semble être une question triviale mais après quelques heures à tripoter le carrousel Twitter Bootstrap dans leur exemple ( http://Twitter.github.io/bootstrap/examples/carousel .html ) J'ai recours à SO pour obtenir de l'aide.

Je veux que le carrousel affiche toute la largeur (comme maintenant) mais pas avec une hauteur recadrée. J'ai essayé de régler la hauteur minimale, la hauteur, etc. à 100% dans différents conteneurs, mais sans résultat. Deux cents?

twitter-bootstrapcarousel
18
Lasse

Pour Bootstrap 3, tout ce dont vous avez besoin est:

.carousel img {
    min-width: 100%;
}
17
Nate Beers

Dans l'exemple de carrousel sur le site bootstrap, si vous redimensionnez la fenêtre du navigateur, vous verrez que l'image est réellement étirée sur l'axe des x. Pour obtenir le même effet, utilisez leur CSS :

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

Les deux derniers attributs, min-largeur et hauteur, sont importants. La hauteur est réglée à la taille souhaitée du carrousel.

Enfin, vous voudrez utiliser des balises img pour placer votre image, plutôt qu'une image d'arrière-plan. Voici un exemple plus complet:

<div class="item">
    <img src="image.jpg" />
    <div class="container">
        <div class="carousel-caption">
            <h1>Header</h1>
            <p class="lead">This is a caption</p>
            <a class="btn btn-large btn-primary" href="#">Large Button</a>
        </div>
    </div>
</div>

J'espère que ça aide. À votre santé!

7
Julian Soro

Utilisez les éléments suivants pour chaque image que vous souhaitez insérer dans la diapositive:

<img class="img-responsive center-block" src="#">
1
Becky

Bien que cela remonte à 3 ans, la solution proposée par 'Nate Beers' a résolu mon problème, en utilisant Bootstrap 3.3.7

C'est parce que 'max-width' définit la largeur maximale de l'élément qui remplace la propriété width lorsque la largeur est supérieure à la largeur maximale.

De plus, la "largeur minimale" remplace toujours la "largeur maximale".

Voici n exemple dans codepen, redimensionnez la fenêtre d'aperçu pour voir comment cela fonctionne.

Vérifiez l'élément ci-dessous en particulier en redimensionnant à la plus petite largeur possible et comparez avec 2 autres éléments i1 et i2.

<div class="i3">Sample</div>
1
skay

Vous pensez avoir une solution avec de simples modifications CSS? Changez simplement ce qui suit de (OLD) en;

    .carousel {
  /*height: 500px; OLD*/
  /*margin-bottom: 60px; OLD*/

  /*max-width:1200px; THIS IS OPTIONAL (ANY SIZE YOU LIKE)*/
  margin:0 auto 60px;
}

.carousel .item {
    /*height: 500px; OLD*/
    /*background-color: #777; OLD*/

    width:100%;
    height:auto;
}
.carousel-inner > .item > img {
  /*position: absolute; OLD+WHY?*/
  /*top: 0; OLD+WHY?*/
  /*left: 0; OLD+WHY?*/

  min-width:100%;
  height:auto;
}
1
Kerry Smyth