web-dev-qa-db-fra.com

Bootstrap changer la hauteur du carrousel

J'ai un jsfiddle ici - http://jsfiddle.net/gh4Lur4b/8/

Il s'agit d'un carrousel pleine largeur bootstrap.

Je voudrais changer la hauteur tout en la gardant sur toute sa largeur.

Est la hauteur déterminée par la hauteur de l'image.

Comment puis-je changer la hauteur du carrousel et le garder à 100% de largeur.

    .carousel-inner{
       // height: 300px;
    }

    .item, img{
        height: 100% !important;
        width:  100% !important;
        border: 1px solid red;
    }
14
ttmt

Les éléments suivants devraient fonctionner

.carousel .item {
  height: 300px;
}

.item img {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 300px;
}

JSFille pour référence.

23
Bart Jedrocha

De Bootstrap 4

.carousel-item{
    height: 200px;
} 
.carousel-item img{
    height: 200px;
}
4
Shailesh Bhardwaj

Merci! Ce message est très utile. Vous pouvez également ajouter

fit-fit: couverture;

Pour conserver la ration d'aspect pour différentes tailles de fenêtres

.carousel .item {
  height: 500px;
}

.item img {
    position: absolute;
    object-fit:cover;
    top: 0;
    left: 0;
    min-height: 500px;
}
3
Brandon Walton