通过设置 height: 100vh 并配合 object-fit: contain，可确保图片始终完整显示在当前视口内，无论窗口高度如何变化。
通过设置 `height: 100vh` 并配合 `object-fit: contain`，可确保图片始终完整显示在当前视口内，无论窗口高度如何变化。
在响应式图像布局中，仅依赖 height: 100% 通常无法实现预期效果，因为百分比高度要求父元素具有明确的高度值，而默认情况下 和 <div class="container"> 并未设定高度，导致 <code>height: 100% 失效或计算为 0。
正确做法是直接使用视口单位 vh（viewport height）：height: 100vh 表示图片高度始终等于浏览器窗口的可视高度，无需依赖父容器高度声明。再结合 object-fit: contain，可保证图像按比例缩放、完整可见且不裁剪。
以下是优化后的完整代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全高自适应图片轮播</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body::-webkit-scrollbar { display: none; }
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.container img {
height: 100vh;
width: auto; /* 允许宽度随高度等比缩放 */
max-width: 100vw;
object-fit: contain;
display: block;
}
/* 可选：防止图片被拖拽选中 */
.container img {
-webkit-user-drag: none;
user-select: none;
}
</style>
</head>
<body>
<div class="container">
<img src="wallpaper.jpg" alt="全视口适配背景图">
</div>
</body>
</html>⚠️ 注意事项：
- 避免同时设置
height: 100vh和max-height: 100%，后者在无明确父高时无效，反而可能干扰布局； - 若需支持旧版 Safari（100vh 在地址栏显示/隐藏时可能触发重排，可考虑用
100dvh（动态视口高度）替代（现代浏览器已广泛支持）； -
object-fit: contain是关键——它确保图像完整居中显示；若需铺满且允许裁剪，可改用cover，但会丢失部分内容。
总结：100vh + object-fit: contain 是解决垂直方向视口缩放时图像自适应问题的简洁、可靠方案，无需 JavaScript，纯 CSS 即可实现高性能响应式图像展示。
