下面的代码片段在我的浏览器中正常工作，直到我在Firefox上打开响应式设计模式，它在页面底部放置了一个白色：
如果我禁用触摸模拟，“错误”就会消失。
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<img style="height: 100vh" src="https://www.pixelstalk.net/wp-content/uploads/2016/08/Download-Full-HD-Wallpapers-1080p-Free-620x349.jpg" />
</body>
</html>有什么解决办法吗？
更新1：
我发现我需要添加：
width: 100%;
object-fit: cover;但是，我还是不明白为什么要将宽度设置为100%。
1条答案
按热度按时间oprakyz71#
View Heights有一些新的解决移动的问题的方法。
我的第二个解决方案需要更多的研究。以下是我认为你应该尝试的一些属性：
此外，您应该尝试使用
min-height: ;使用上述属性实际上有24个viewport属性。来自Web Dev Simplified的凯尔在这个youtube视频enter link description here中解释得很好