在不同的設備上使引導程序輪播顯示不同

Question

我在移動設備和桌面屏幕上以不同方式顯示引導程序輪播顯示時出現問題。

這裏是我的HTML：

<div id="myCarousel" class="carousel slide" data-ride="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> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 

    <div class="item active"> 
     <center><img src="img.jpg" alt="..."></center> 
     <div class="carousel-caption"> 
     <p>1st Screen</p> 
     </div> 
    </div> 
    <div class="item"> 
    <center> <img src="img2.jpg" alt="..."></center> 
     <div class="carousel-caption"> 
     <p>2nd Screen</p> 
     </div> 
    </div> 
    <div class="item"> 
     <center><img src="img3.jpg" alt="..."></center> 
     <div class="carousel-caption"> 
     <p>3rd Screen</p> 
     </div> 
    </div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
</div> 

您可以查看站點here

我遇到的問題是，我的影像尺寸在移動設備上出現不同，3個圖像，我有有：

img.jpg尺寸= 700 x 378 pixels

種img2.jpg尺寸= 700 x 378 pixels

img3.jpg尺寸= 700 x 378 pixels

的圖像顯示了罰款桌面設備上但在移動設備上的整體形象似乎放大和一些圖像的熄滅屏幕。

我想要一個媒體查詢，它僅在移動設備上生成所有圖像width:100%。

還是有一種簡單的方法來保存所有設備上的圖像大小？

欣賞的幫助

Answer 1

白手起家有一個預定義的CSS類名爲「IMG響應」。這應該在移動設備上正確縮放圖像。舉個例子：

<img src="..." class="img-responsive" alt="Responsive image"> 

Answer 2

其實，有一個叫做Skidder jQuery的滑塊插件。沒有與默認引導程序傳送帶相同的設計，但相當不錯。 .img-responsive不會這樣做。

編輯：在旋轉木馬的CSS添加height: 54vw;它應該工作得很好。 （高度/寬度％= 54）