web-dev-qa-db-fra.com

Hauteur et largeur fixes pour le carrousel bootstrap

J'utilise le carrousel bootstrap mais je souhaite une largeur et une hauteur fixes pour que toutes mes images s'adaptent automatiquement à la hauteur et à la largeur définies. Quelqu'un peut-il m'aider s'il vous plaît pour y parvenir. Merci beaucoup.

<div class="row">
                <div class="span8">
                    <div id="myCarousel" class="carousel slide">
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1" class=""></li>
                            <li data-target="#myCarousel" data-slide-to="2" class=""></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item active">

                                <img src="~/Images/Carousel/carousel_1.jpg" alt="http://www.google.com">
                                <div class="carousel-caption">
                                    <h4>First Thumbnail label</h4>

                                    <p>Deals you cannot miss.</p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="~/Images/Carousel/carousel_2.jpg" alt="http://www.google.com">
                                <div class="carousel-caption">
                                    <h4>Second Thumbnail label</h4>

                                    <p>Claim it now.</p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="~/Images/Carousel/carousel_1.jpg" alt="http://www.google.com">
                                <div class="carousel-caption">
                                    <h4>Third Thumbnail label</h4>

                                    <p>Act fast. Only for today.</p>
                                </div>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
                        <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
                    </div>
                </div>
            </div>
twitter-bootstrapcarousel
8
nishantvodoo

Appliquez le style suivant à la liste déroulante desous.

 <div class="carousel-inner" role="listbox" style=" width:100%; height: 500px !important;">

...

</div

14
sunil sah

Certaines images pouvant avoir une hauteur inférieure à 500 pixels, il est préférable de conserver le réglage automatique. Je recommande donc ce qui suit:

<div class="carousel-inner" role="listbox" style="max-width:900px; max-height:600px !important;">`
4
Gabriel Souto

Pour obtenir un flux cohérent des images sur différents périphériques, vous devez spécifier la largeur et la hauteur de chaque élément d'image du carrousel. Par exemple, dans mon exemple, l'image prend toute la largeur mais sa hauteur est de "400 pixels". (vous pouvez spécifier votre valeur personnelle à la place)

<div class="item">
        <img src="image.jpg" style="width:100%; height: 400px;">
      </div>
0
y0ung0d

Dans votre fichier styles.css principal, modifiez height/auto selon les paramètres de votre choix. Par exemple, 500px: 

#myCarousel {
  height: auto;
  width: auto;
  overflow: hidden;
}
0
Johnathan