twitter-bootstrap bootstrap carousel 的固定高度和宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17036766/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fixed height and width for bootstrap carousel
提问by nishantvodoo
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.
我正在使用 bootstrap carousel，但我想要一个固定的宽度和高度，这样我的所有图像都会自动适应定义的高度和宽度。有人可以帮助我实现这一目标。
<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>
回答by sunil sah
Apply following style to carousel listbox.
将以下样式应用于轮播列表框。
<div class="carousel-inner" role="listbox" style=" width:100%; height: 500px !important;">
...
</div回答by Gabriel Souto
Because some images could have less than 500px of height, it's better to keep the auto-adjust, so i recommend the following:
因为有些图片的高度可能小于 500px，所以最好保持自动调整，所以我建议如下：
<div class="carousel-inner" role="listbox" style="max-width:900px; max-height:600px !important;">`
回答by Johnathan
In your main styles.cssfile change height/auto to whatever settings you desire. For example, 500px:
在您的主styles.css文件中，将 height/auto 更改为您想要的任何设置。例如500px：
#myCarousel {
height: auto;
width: auto;
overflow: hidden;
}
回答by y0ung0d
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)
要在不同设备上保持一致的图像流，您必须为每个轮播图像项指定宽度和高度值，例如在我的示例中，图像将采用全宽但高度为“400px” （您可以指定您的个人价值）
<div class="item">
<img src="image.jpg" style="width:100%; height: 400px;">
</div>
