CSS 如何使 twitter bootstrap 3 图像轮播自动调整图像大小以适应轮播？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25561322/
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 twitter bootstrap 3 image carousel auto resize image to fit within the carousel?
提问by Grovesy
I'm having issues trying to get my images to fit into the box exactly.
我在试图让我的图像完全适合盒子时遇到问题。
I want them to keep their aspect ratio, size, dimensions but fit/shrink into the carousel box.
我希望它们保持纵横比、大小、尺寸，但适合/收缩到传送带盒中。
as you can see the im missing half the image, this is because i have a set height, but i want it to auto size to fit into the carousel box if that makes sense...
正如你所看到的，我缺少一半的图像，这是因为我有一个设定的高度，但我希望它自动调整大小以适应轮播框，如果这有意义的话......
www.bollinbuild.co.uk/index.htmlis where you can see the carousel in action.
www.bollinbuild.co.uk/index.html是您可以看到旋转木马运行的地方。
each image has a greater size in dimension then the carousel so therefore i lose half the image and the quality.
每个图像的尺寸都比轮播大，因此我损失了一半的图像和质量。
the 3 images im using are;
我使用的 3 张图像是；
www.bollinbuild.co.uk/images/1.jpg
www.bollinbuild.co.uk/images/2.jpg
www.bollinbuild.co.uk/images/3.jpg
www.bollinbuild.co.uk/images/1.jpg
www.bollinbuild.co.uk/images/2.jpg
www.bollinbuild.co.uk/images/3.jpg
this is my code;
这是我的代码；
CSS
CSS
<style type="text/css">
.item{
text-align: center;
width: auto;
}
.bs-example{
margin: 10px;
}
.slider-size {
height: 300px; /* This is your slider height */
}
.carousel {
width:80%;
margin:0 auto; /* center your carousel if other than 100% */
}
</style>
HTML
HTML
<div class="container">
<div class="row">
<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<div style="background:url(/images/1.jpg) center center;
background-size:cover;" class="slider-size">
</div>
</div>
<div class="item">
<div style="background:url(/images/2.jpg) center center;
background-size:cover;" class="slider-size">
</div>
</div>
<div class="item">
<div style="background:url(/images/3.jpg) center center;
background-size:cover;" class="slider-size">
</div>
</div>
</div><!-- /.END CAROUSEL DIV -->
</div><!-- /.END MYCAROUSEL DIV -->
</div><!-- /.END BSEXAMPLE -->
</div>
</div>
I read about putting the images as a div and as a background url rather then in tag but im still not getting the full image to sit in the carousel.
我读过关于将图像作为 div 和背景 url 而不是在标签中的内容，但我仍然没有将完整的图像放在轮播中。
Replace the image with a container div using the image file as a background. Set width to 100% so it will expand to fill it's container. Set the height of the slider so it will have a consistent display regardless of the image size. Win
Replace the image with a container div using the image file as a background. Set width to 100% so it will expand to fill it's container. Set the height of the slider so it will have a consistent display regardless of the image size. Win
source http://parkhurstdesign.com/improved-carousels-twitter-bootstrap/
来源http://parkhurstdesign.com/improved-carousels-twitter-bootstrap/
回答by Tricky12
Instead of making your images the background of a div, put them as an actual <img/>element within those divs and give them a height of 100% (choose height because your height will break before width since you have wide images).
不要将您的图像作为 div 的背景，而是将它们作为<img/>这些 div 中的实际元素并赋予它们 100% 的高度（选择高度是因为您的高度会在宽度之前中断，因为您有宽图像）。
This
这个
<div class="slider-size">
<img src="/images/1.jpg" style="height: 100%;" />
</div>
Instead of this
而不是这个
<div style="background:url(/images/1.jpg) center center; background-size:cover;" class="slider-size"></div>
CSS Media queries:
CSS 媒体查询：
/* Mobile */
@media (max-width: 767px) {
.slider-size {
height: auto;
}
.slider-size > img {
width: 80%;
}
}
/* tablets */
@media (max-width: 991px) and (min-width: 768px) {
.slider-size {
height: auto;
}
.slider-size > img {
width: 80%;
}
}
/* laptops */
@media (max-width: 1023px) and (min-width: 992px) {
.slider-size {
height: 200px;
}
.slider-size > img {
width: 80%;
}
}
/* desktops */
@media (min-width: 1024px) {
.slider-size {
height: 300px;
}
.slider-size > img {
width: 60%;
}
}
