如何使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%; 
    } 
}