css - 如何使 twitter bootstrap 3 图像轮播自动调整图像大小以适应轮播？

Question

我在尝试让我的图像完全适合盒子时遇到问题。

我希望它们保持纵横比、大小和尺寸，但适合/收缩到轮播框内。

如您所见，我丢失了一半的图像，这是因为我有一个设定的高度，但我希望它自动调整大小以适合轮播框，如果这有意义的话......

www.bollinbuild.co.uk/index.html在这里您可以看到正在运行的旋转木马。

每张图片的尺寸都比旋转木马大，因此我损失了一半的图片和质量。

我使用的 3 张图片是；

www.bollinbuild.co.uk/images/1.jpg
www.bollinbuild.co.uk/images/2.jpg
www.bollinbuild.co.uk/images/3.jpg

这是我的代码；

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

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

我读到有关将图像作为 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

来源http://parkhurstdesign.com/improved-carousels-twitter-bootstrap/

Answer 1

与其将您的图像作为 div 的背景，不如将它们作为实际的 <img/>这些 div 中的元素，并给它们 100% 的高度(选择高度，因为你的高度会在宽度之前中断，因为你有宽图像)。

这个

<div class="slider-size">
    <img src="/images/1.jpg" style="height: 100%;" />
</div>

代替这个

 <div style="background:url(/images/1.jpg) center center; background-size:cover;" class="slider-size"></div>

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%;
    }
}