twitter-bootstrap 保持图像纵横比的 Bootstrap 轮播
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20593884/
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
Bootstrap carousel that keeps the image aspect ratio
提问by Fred30
I have a bootstrap carousel on my website. I want to keep the image aspect ratio when resizing on smaller screens. How to do this?
我的网站上有一个引导轮播。在较小的屏幕上调整大小时，我想保持图像纵横比。这个怎么做？
Here's some code:
这是一些代码：
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="img/bg_good_sex2.jpg" class="img-responsive" alt="verslaafd-aan-porno-goede-seks">
<div class="container">
<div class="carousel-caption">
<h1>Sex Coach <span class="text-primary"> App
</span></h1>
<p>Krijg controle op porno- of seksverslaving</p>
<p><a href="<?php echo SSL_DOCUMENT_ROOT ?>/register.php" class="btn btn-lg btn-primary"><i class="icon-chevron-sign-right"></i> <?php echo START_BTN ?></a></p>
<p><a href="<?php echo SSL_DOCUMENT_ROOT ?>/survey_me.php" class="btn btn-success btn-primary btn-lg"><i class="icon-edit"></i> <?php echo BTN_SURVEY_ME ?></a></p>
</div>
</div>
</div>
</div>
</div><!-- /.carousel -->
Thank you, Fred
谢谢你，弗雷德
回答by Mike Causer
Add the following styles to the <img>. This will keep the aspect ratio on large browsers.
将以下样式添加到<img>. 这将保持大型浏览器的纵横比。
max-width: 100%;
width: auto;
height: auto;
vertical-align: middle;
Another option is to use <div>'s with background images and use background-size: cover
另一种选择是将<div>'s 与背景图像一起使用并使用background-size: cover
回答by Jacob Thygesen
I've tried the above answer and many others without luck, but by using chrome development tools, i've come up with this short solution. Hope this works for you as well:
我已经尝试了上面的答案和其他许多没有运气的答案，但是通过使用 chrome 开发工具，我想出了这个简短的解决方案。希望这也适用于您：
/* Carousel image resize */
.carousel-inner > .item > a > img, .carousel-inner > .item > img {
width: 100%;
}
Its important to use the exact code with the same classes as described above
使用与上述相同类的确切代码很重要
