固定高度和宽度的自举旋转木马

Question

我正在使用自举旋转木马,但我想要一个固定的宽度和高度,以便我的所有图像都能自动适应定义的高度和宽度.有人可以帮助我实现这一目标.非常感谢你.

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

Answer 1

将以下样式应用于carousal列表框.

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

...

</div

Answer 2

因为有些图像的高度可能小于 500px，所以最好保持自动调整，所以我建议如下：

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

Answer 3

在您的主styles.css文件中将 height/auto 更改为您想要的任何设置。例如，500px：

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