社区首页 >问答首页 >如何使twitter引导3图像旋转木马自动调整图像大小以适应旋转木马？

问如何使twitter引导3图像旋转木马自动调整图像大小以适应旋转木马？
EN

Stack Overflow用户

提问于 2014-08-28 19:36:11

回答 1查看 43.4K关注 0票数 9

我有一些问题，想要把我的图像准确地放进盒子里。

我想要他们保持其长宽比，大小，尺寸，但适合/缩小到旋转木马盒。

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

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>

<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而不是标签，但我仍然没有得到完整的图像坐在旋转木马上。

使用图像文件作为背景，用容器div替换图像。将宽度设置为100%，以便将其展开以填充其容器。设置滑块的高度，这样无论图像大小如何，它都会有一致的显示。赢

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

css

twitter-bootstrap

twitter-bootstrap-3

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-08-28 20:17:07

不要将图像作为div的背景，而是将它们作为这些div中的一个实际的<img/>元素，并给它们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%;
    }
}