我想按比例缩放图像以覆盖浏览器窗口，以便用户只需向一侧或向下滚动即可看到整个图像，而不管图像和浏览器的尺寸如何。我使用了最小宽度：100vw 和最小高度：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>
它需要处理不同长宽比的图像。
你可以用CSS做很多事情
background-size: cover;它将确保
background-image工作示例：
body {
margin: 0;
}
div.full-plus {
position: fixed;
inset: 0;
background-image: url('https://www.w3schools.com/w3css/img_lights.jpg');
background-size: cover;
background-repeat: no-repeat;
}<div class="full-plus"></div>