如何調整手機屏幕上的圖像

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

對於滑塊如果我使用尺寸的圖像：1920px * 1228px;它使用筆記本電腦屏幕的完整高度，但在移動屏幕上查看時，它會覆蓋約。手機屏幕的30％（因爲手機的寬度比高度低）。
另一方面，如果我試圖使用尺寸爲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>

來源

2017-12-27 Ishaan

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

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

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

頭使用viewport然後檢查。

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

來源

2017-12-27 15:59:08 Maan56

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

如何調整手機屏幕上的圖像

回答

相關問題