Html 如何使 Bootstrap Carousel 中的图像响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25047333/
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
How to make images in Bootstrap Carousel responsive?
提问by nattienatz
Is there a way to make your images within bootstrap's carousel responsive with a fixed height? I've tried everything. I also used img-responsive, and in the CSS I tried everything as well.
有没有办法让你的图像在引导程序的旋转木马中以固定的高度响应？我什么都试过了。我还使用了 img-responsive，并且在 CSS 中我也尝试了所有方法。
Here's my html
这是我的 html
<div class="item active">
<img src="images/slide1.jpg" alt="First slide" class="img-responsive">
<div class="container">
<div class="carousel-caption" style="padding-bottom:90px;">
<h1>Totes for all</h1>
<p>Personalize your style</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">View all</a></p>
</div><!-- /.carousel-caption -->
</div><!-- /.container -->
</div><!-- /.item -->
<div class="item">
<img src="images/slide2.png" alt="Second slide" class="img-responsive">
<div class="container">
<div class="carousel-caption">
<div class="caption_background">
<h1>Pattern it</h1>
<p>Choose your favorite</p>
</div>
<p><a class="btn btn-lg btn-primary" href="#" role="button">View all</a></p>
</div><!-- /.carousel-caption -->
</div><!-- /.container -->
</div><!-- /.item -->
</div><!-- /.carousel-inner -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.myCarousel -->
Here's my CSS
这是我的 CSS
采纳答案by vdenotaris
First of all, you have to check the facilities provided by Bootstrap, specifically the grid system and the responsive utilities.
首先，您必须检查 Bootstrap 提供的工具，特别是网格系统和响应式实用程序。
Then, to perform a good responsive procedure, width and height should be both resizable, according to the current screen size.
然后，为了执行良好的响应程序，宽度和高度都应该根据当前屏幕尺寸调整大小。
Furthermore, you can find related questions on StackOverflow, just for instance:
此外，您可以在 StackOverflow 上找到相关问题，例如：
回答by Daniel Leth
Try this jq, it makes your .carousel-inner as window height. but remember to -height your navnbar, footer ect. all other elements/divs heights you have to -.
试试这个 jq，它让你的 .carousel-inner 作为窗口高度。但请记住 -height 您的导航栏、页脚等。您必须-的所有其他元素/ div高度。
function init_carousel() {
H = +($(window).height() /* -height here */); // or $('.carousel-inner') as you want ...
$('.carousel-inner').css('height', H + 'px');
}
window.onload = init_carousel;
init_carousel();
回答by Akash
Try this bootsniphttp://bootsnipp.com/snippets/featured/simple-responsive-carousel. This is a good website for some helpful copy-paste snippetsfor bootstrap.
试试这个bootsnip http://bootsnipp.com/snippets/featured/simple-responsive-carousel。这是一个很好的网站，可以snippets为引导程序提供一些有用的复制粘贴。
回答by Andy Hymano
I know this is a little late to the party but I recently had this issue and overcame it by giving each item its own ID and then setting the images to the elements as background images in CSS...
我知道这对派对来说有点晚了，但我最近遇到了这个问题，并通过为每个项目提供自己的 ID 然后将图像设置为元素作为 CSS 中的背景图像来克服它...
<div id="header-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div id="cazza1" class="item active">
</div>
<div id="cazza2" class="item">
</div>
<div id="cazza3" class="item">
</div>
</div>
</div>
And the CSS:
和 CSS：
#header-carousel {
height: 240px;
}#cazza1 {
height: 240px;
background-image: url(/images/header1.jpg);
background-position: center center;
background-size: cover;
}#cazza2 {
height: 240px;
background-image: url(/images/header2.jpg);
background-position: center center;
background-size: cover;
}#cazza3 {
height: 240px;
background-image: url(/images/header3.jpg);
background-position: center center;
background-size: cover;
}
