Fixed height and width for bootstrap carousel

问题

I am using the bootstrap carousel but I want a fixed width and height so that all my images will auto fit to the defined height and width. Can someone please help me on achieving this.

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

回答1:

Apply following style to carousel listbox.

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

...

</div

回答2:

Because some images could have less than 500px of height, it's better to keep the auto-adjust, so i recommend the following:

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

回答3:

In your main styles.css file change height/auto to whatever settings you desire. For example, 500px:

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

回答4:

To have a consistent flow of the images on different devices, you'd have to specify the width and height value for each carousel image item, for instance here in my example the image would take the full width but with a height of "400px" (you can specify your personal value instead)

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

来源：https://stackoverflow.com/questions/17036766/fixed-height-and-width-for-bootstrap-carousel

标签

twitter-bootstrap

carousel