我应该如何在不同类型的屏幕上调整 slider 图像?我正在使用 Bootstrap 。
- 对于 slider ,如果我使用尺寸图像:1920px *1228px;它使用的是笔记本电脑屏幕的完整高度,但在移动屏幕上查看时 - 它覆盖了大约。移动屏幕的 30%。(因为移动宽度相对小于高度)。
- 另一方面,如果我尝试使用尺寸为 1600*400 像素的图像;在笔记本电脑屏幕上,它占据了大约 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">
关于html - 如何在手机屏幕上调整图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47993855/