如何使twitter引导3图像轮播自动调整图像大小以适合轮播？

Question

我遇到了问题，试图让我的图像完全适合框。

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

，你可以看到我在想念着一半的图像，这是因为我有一组的高度，但我希望它自动调整大小以适应传送带盒如果是有道理的......

www.bollinbuild.co.uk/index.html是你可以看到旋转木马的行动。

每幅图像的尺寸都大于旋转木马的尺寸，所以我失去了一半的图像和质量。

im使用的是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的背景下，把他们当成这些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%; 
    } 
}