我想按比例缩放图像以覆盖浏览器窗口的宽度和高度，以便用户只需向一侧或向下滚动即可看到整个图像，而不管图像和浏览器的尺寸如何。我使用了最小宽度：100vw 和最小高度：100vh。只要浏览器窗口大于图像的像素尺寸，该代码就可以正常工作。如何使其适用于较大的图像？
在整个页面中运行代码片段，并使浏览器窗口小于 600px 宽和 400px 高，以查看问题。
html {
width: 100%;
margin: 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>
<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>它需要处理不同长宽比的图像。
@AHaworth 是对的 - 你需要 JS 来检查纵横比。
工作示例：
const myDiv = document.querySelector('div.full-plus');
const resizeDiv = () => {
if (window.innerWidth / window.innerHeight) {
myDiv.style.setProperty('width', 'auto');
} else {
myDiv.style.setProperty('height', 'auto');
}
}
window.addEventListener('resize', resizeDiv);
resizeDiv();body {
margin: 0;
}
div.full-plus {
position: fixed;
inset: 0;
width: 100vmin;
height: 100vmin;
background-image: url('https://www.w3schools.com/w3css/img_lights.jpg');
background-size: contain;
background-repeat: no-repeat;
}<div class="full-plus"></div>