如何使图像适应手机屏幕
Posted
技术标签:
【中文标题】如何使图像适应手机屏幕【英文标题】：How to make image adjust to the mobile screen 【发布时间】：2019-07-05 00:38:54 【问题描述】：我正在使用此处的轮播示例：https://www.w3schools.com/bootstrap/bootstrap_carousel.asp 我有一些来自我的应用程序的示例图像，这些图像是我从带有打印屏幕的 5.7 英寸移动设备上拍摄的，并向上移除了通知栏（显示信号等）。我正在尝试使这些示例图像（轮播）与我的屏幕的高度和宽度相同，而无需用户向下或向右滚动以查看完整的图像。因此，用户将看到一个操作栏（应用程序具有的操作栏，因为它将在 web 视图中打开）和仅轮播。我尝试更改图像的宽度和高度但没有成功。
更新：基于 Metatron5 答案，我更改了代码，它在 android 的 firefox 中工作，但它无法识别 android webview 中的 vh 和 vw
<!DOCTYPE html>
<html lang="en">
<head>
<title>Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<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="begin.png" style="height: 100vh; width: 100vw;">
</div>
<div class="item">
<img src="first.png" style="height: 100vh; width: 100vw;">
</div>
<div class="item">
<img src="second.png" style="height: 100vh; width: 100vw;">
</div>
<div class="item">
<img src="third.png" style="height: 100vh; width: 100vw;">
</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>
</div>
</body>
</html>【问题讨论】：
您是否尝试设置高度 100vh 和宽度 100vw？ @Metatron5 抱歉更新！我试过了，它似乎在 android 的 Firefox 中工作。我认为这是最好的方法，谢谢！ :) ，现在的问题是它在android webview中不起作用并且右边有一个空白 @Metatron5 谢谢你，我检查了，我有这个权利，android:layout_ 你能不能给 body 一个 100vw 的宽度和一个 100vh 的高度。留下图片与% @Metatron5 我不知道为什么，但我相信即使我重新启动了我的手机。一些缓存可能保留在应用程序上，并且它卡在空白的轮播上。我清除了应用程序数据，并将 img 的样式更改为 style="height: 100%; width: 100% 并且它似乎可以工作:) 谢谢 【参考方案1】：就像评论中一样，问题似乎是电话上有一些 Cashe，这就是样式不起作用的原因。所以它终于奏效了，但我想说明，Units vh 和 vw 在 Androit Webview 中不起作用。
【讨论】：
【参考方案2】：几个月前我也遇到了同样的问题。 VH 和 VW 无法在 Google TV 上运行。所以，我用 javascript 解决了这个问题。尝试在脚本文件中添加以下代码：
const sliderImages= document.querySelectorAll('carousel-inner .item');
window.onload = function (e)
sliderImages.forEach(sliderImage=>
sliderImage.style.height = `$this.innerHeightpx`;
sliderImage.style.width = `$this.innerWidthpx`;
);
window.onresize= function (e)
sliderImages.forEach(sliderImage=>
sliderImage.style.height = `$this.innerHeightpx`;
sliderImage.style.width = `$this.innerWidthpx`;
);
【讨论】：
真的没有别的办法，只能用js解决问题吗？ 嗯，我认为使用 JS 是跨浏览器的解决方案。如果这一小段代码给您带来了问题，那么您可以忽略 JS。但不知道如何使用VH 和 VW 以外的 CSS 检测 Wnidow/Browser 的宽度和高度。
你有js文件吗？如果有，则将代码粘贴到文件末尾或者您可以创建一个js文件并粘贴代码并将js文件添加到关闭</body>标签之前。
我做了一个新的 .js 文件。它在android 4.3 webview中工作吗？它仍然出现同样的问题。当我关闭并重新打开应用程序时，webview 是否会刷新？
您是否从滑块图像中删除了内联样式？ <img src="begin.png" alt="" style="height: 100vh; width: 100vw;"> 删除这些样式。之后，如果问题存在，那么您可以使用 Skype 中的屏幕共享或类似的方式向我展示您的问题以上是关于如何使图像适应手机屏幕的主要内容，如果未能解决你的问题，请参考以下文章