固定引导轮播的高度和宽度答案

【问题标题】：Fixed height and width for bootstrap carousel固定引导轮播的高度和宽度
【发布时间】：2013-06-06 20:51:54
【问题描述】：

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

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

【问题讨论】：

为什么要修复这个轮播？
是的，我希望轮播具有固定的高度和宽度，无论我分配给它什么图像，它都应该尝试根据定义的大小自动调整图像。我希望它保持一致，因为我将不得不不断更改图像，这样会更容易。它还可以让我在不改变图片大小的情况下改变轮播的高度和宽度
简单的出路，我认为放弃将 TB carousel 嵌入您的网站的想法，找到一些其他滑块插件...对于 TB Carousel，您必须自定义其 css 和 js，这需要时间工作...

标签： twitter-bootstrap carousel

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

...

</div

【讨论】：

大尺寸图片被裁剪显示。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：