it-swarm.com.de

Feste Höhe und Breite für das Bootstrap-Karussell

Ich benutze das Bootstrap-Karussell, aber ich möchte eine feste Breite und Höhe, damit alle meine Bilder automatisch der definierten Höhe und Breite entsprechen. Kann mir bitte jemand dabei helfen? Vielen Dank.

<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>
8
nishantvodoo

Übernehmen Sie den folgenden Stil für die Karussell-Listbox.

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

...

</div

14
sunil sah

Da einige Bilder weniger als 500 Pixel groß sein können, empfiehlt es sich, die automatische Anpassung beizubehalten. Daher empfehle ich Folgendes:

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

Um einen konsistenten Fluss der Bilder auf verschiedenen Geräten zu erhalten, müssten Sie für jedes Karussell-Bildelement den Wert für die Breite und die Höhe angeben. In meinem Beispiel würde das Bild beispielsweise die volle Breite annehmen, jedoch eine Höhe von "400px". (Sie können stattdessen Ihren persönlichen Wert angeben)

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

Ändern Sie in Ihrer styles.css-Datei die Höhe/auto auf die gewünschten Einstellungen. Zum Beispiel 500px

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