我想按比例缩放图像以覆盖浏览器窗口，以便用户只需向一侧或向下滚动即可看到整个图像，而不管图像和浏览器的尺寸如何。我使用了 min-width=100vw 和 min-height=100vh。只要浏览器窗口大于图像的像素尺寸，该代码就可以正常工作。如何使其适用于较大的图像？
CSS
html, body {
width: 100%;
margin: 0;
padding: 0;
}
.full-plus {
width: calc(100vw - 20px);
height: calc(100vh - 20px);
background-color: red;
}
.full-plus img {
min-width: calc(100vw - 40px);
min-height: calc(100vh - 40px);
}
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="full-plus">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="">
</div>
</body>
</html>
这是您想要的解决方案吗？
html, body, .full-plus {
height: 100%;
}
body {
margin: 0;
}
.full-plus {
overflow: auto;
}
.full-plus img {
min-width: 100%;
min-height: 100%;
}<div class="full-plus">
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
</div>