通过设置 height: 100vh 可使图片高度始终等于浏览器视口高度，结合 object-fit: contain 和响应式约束，实现垂直方向缩放时图片不溢出、不失真、居中完整显示。
通过设置 `height: 100vh` 可使图片高度始终等于浏览器视口高度，结合 `object-fit: contain` 和响应式约束，实现垂直方向缩放时图片不溢出、不失真、居中完整显示。
在响应式网页开发中，常遇到这样一个需求：当用户缩小浏览器窗口（尤其是垂直方向）时，页面中的大图不应被截断或溢出视口，而应自动等比缩放并完整可见。原代码中使用 height: 100% 无法生效，是因为父容器（如 .container 和 body）未显式定义高度，导致百分比高度失去计算基准。
✅ 正确解法是直接基于视口单位（Viewport Units）：
使用 height: 100vh —— 表示图片高度始终等于当前浏览器视口的 100% 高度。配合 object-fit: contain，可确保图片在保持宽高比的前提下，完整、居中地适应容器空间。
以下是优化后的完整示例代码：
<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 { overflow: hidden; } /* 防止滚动条干扰视口高度 */
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
img {
height: 100vh; /* 关键：绑定视口高度 */
max-width: 100vw; /* 防止横屏时过宽 */
object-fit: contain; /* 等比缩放 + 完整可见 */
display: block;
}
</style><div class="container">
@@##@@
</div>
⚠️ 注意事项：
-
100vh在部分移动端浏览器（如 iOS Safari）中可能受地址栏显示/隐藏影响而波动，若需极致稳定，可结合 JavaScript 动态监听resize并更新--vhCSS 变量（进阶方案）； - 避免同时设置
height: 100vh和max-height: 100%，后者在无明确父高时无效，反而可能造成样式冲突； - 若图片需作为背景，推荐改用
background-image+background-size: contain，语义更清晰且兼容性更好。
总结：100vh 是解决“垂直视口缩放下图片自适应”的最简有效方案，无需 JavaScript，纯 CSS 即可实现可靠、高性能的响应式图像布局。
