17

我正在使用引导轮播，但我想要一个固定的宽度和高度，这样我的所有图像都会自动适应定义的高度和宽度。有人可以帮助我实现这一目标。

<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">‹&lt;/a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">›&lt;/a>
        </div>
    </div>
</div>
4

4 回答 4

25

将以下样式应用于轮播列表框。

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

...

</div

于 2015-11-10T06:04:51.170 回答
4

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

<div class="carousel-inner" role="listbox" style="max-width:900px; max-height:600px !important;">
于 2017-10-26T02:54:52.223 回答
0

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

#myCarousel {
  height: auto;
  width: auto;
  overflow: hidden;
}
于 2015-07-08T22:25:32.387 回答
0

要在不同设备上保持一致的图像流，您必须为每个轮播图像项指定宽度和高度值，例如在我的示例中，图像将采用全宽但高度为“400px” （您可以指定您的个人价值）

<div class="item">
    <img src="image.jpg" style="width:100%; height: 400px;">
</div>
于 2017-06-26T04:10:24.740 回答