2017-12-27 187 views
2

如何在不同類型的屏幕上調整滑塊圖像?我正在使用Bootstrap。如何調整手機屏幕上的圖像

  1. 對於滑塊如果我使用尺寸的圖像:1920px * 1228px;它使用筆記本電腦屏幕的完整高度,但在移動屏幕上查看時,它會覆蓋約。手機屏幕的30%(因爲手機的寬度比高度低)。
  2. 另一方面,如果我試圖使用尺寸爲1600 * 400px的圖像;在筆記本電腦的屏幕上,它佔據了我的網站上看起來不錯的高度約爲30%&,但對於我來說,在我的移動屏幕上它看起來非常小而且很糟糕。

我應該添加一些CSS還是別的嗎?

這是我的代碼。

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> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
     <div class="item active"> 
     <img src="images/Cimg5.jpg" alt="Los Angeles" style="width:100%;"> 
     </div> 

     <div class="item"> 
     <img src="images/Cimg2.jpg" alt="Chicago" style="width:100%;"> 
     </div> 

     <div class="item"> 
     <img src="images/Cimg3.jpg" alt="New york" style="width:100%;"> 
     </div> 

    <div class="item"> 
     <img src="images/Cimg4.jpg" alt="New york" style="width:100%;"> 
     </div> 

    </div> 

    <!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
     <span class="sr-only">Next</span> 
    </a> 

</div> 
+1

您是否嘗試將img-responsive類添加到您的img元素中? – David

+0

我剛纔試過了。但沒有得到任何有用的結果。我的問題似乎是由於兩種屏幕之間的高寬比的變化。在筆記本電腦中,我們的寬度大於高度,而手機中的高度更多... – Ishaan

+0

可以查看您的總代碼片段或jsfiddle?看起來這是發生在你的圖像比例。 – Hanif

回答

0

頭使用viewport然後檢查。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
+0

我試過這個,但不工作... – Ishaan