如何调整手机屏幕上的图像

如何在不同类型的屏幕上调整滑块图像？我正在使用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

如何调整手机屏幕上的图像

回答

相关问题