Question

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

我希望他们保持宽高比，尺寸，尺寸，但适合/缩小到旋转木马盒中。

enter image description here

因为你可以看到我失去了一半的图像，这是因为我有一个设定的高度，但我希望它自动大小适合旋转木马盒，如果这是有道理的...

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和背景网址而不是标记，但我仍然没有将完整的图像放在旋转木马中。

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

如何制作Twitter bootstrap 3图像轮播自动调整图像以适应旋转木马？

1 个答案: