Bootstrap轮播图的固定高度和宽度

Question

我正在使用Bootstrap轮播组件，但我希望它有固定的宽度和高度，这样所有的图像都能自动适应定义的高度和宽度。请问有人可以帮我实现这个吗？

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

- nishantvodoo

---

你为什么想要修复这个走马灯？ - SaurabhLP

是的，我希望轮播图具有固定的高度和宽度，并且无论我分配给它什么图像，它都应该尝试根据定义的大小自动适应图像。我希望它保持一致，因为我将不断更改图像，所以这样会更容易。此外，它还将允许我更改轮播图的高度和宽度，而不更改图片大小。 - nishantvodoo

简单点说，我认为你应该放弃在你的网站上嵌入TB Carousel的想法，找一些其他的幻灯片插件...因为对于TB Carousel，你必须自定义它的CSS和JS，这是非常耗时的工作... - SaurabhLP

Answer 1

将以下样式应用于走马灯列表框。

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

...

</div

- sunil sah

---

展示大尺寸的图片时会进行裁剪。 - Tortoise

Answer 2

由于某些图像可能高度不足500px，最好保持自动调整，因此我建议采用以下方法：

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

- Gabriel Souto

Answer 3

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

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

- Johnathan

Answer 4

为了在不同设备上拥有一致的图像流，您需要为每个轮播图像项指定宽度和高度值。例如，在我的示例中，图像将占据整个宽度，但高度为“400px”（您可以指定自己的值）。

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

- y0ung0d