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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

头使用viewport然后检查。

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

以上是 如何调整手机屏幕上的图像 的全部内容， 来源链接： utcz.com/qa/265675.html

回到顶部