使用 css 视口单位（如 `vw`、`vh`）可实现图片尺寸随屏幕宽度动态调整，比单纯依赖百分比高度更可靠；配合 `max-height` 和 `width: auto` 能兼顾比例约束与响应式表现。
在响应式网页开发中，仅设置 max-height: 15% 并不能使图片随视口变化而缩放，因为百分比高度（%）在非绝对定位或无明确父容器高度的上下文中是无效的——CSS 中 height 或 max-height 的百分比值需基于父元素的高度计算，而 <ul> 和 <li> 默认高度由内容决定，通常为 auto，导致 15% 实际解析为 0，图片因此保持原始尺寸。
更可靠的做法是采用视口相对单位（Viewport Units）：
- vw：视口宽度的 1%（例如 10vw = 当前浏览器窗口宽度的 10%）
- vh：视口高度的 1%
- vmin / vmax：取视口宽高中的较小/较大值的 1%
✅ 推荐写法（兼顾比例与响应性）：
.image {
width: 20vw; /* 宽度随窗口等比缩放 */
height: auto; /* 保持原始宽高比 */
max-height: 30vh; /* 防止在极高屏幕上过度拉伸 */
max-width: 100%; /* 避免超出父容器（尤其小屏时） */
}? 注意事项：
- 不要同时设置 width 和 height（除非明确需要拉伸），否则会破坏图片固有比例；
- 若使用 Bootstrap，确保未被其默认 img-fluid 类覆盖（可添加 !important 或提高选择器优先级，但更推荐通过 class="img-fluid image" 组合使用）；
- 在移动端，建议补充 srcset 与 sizes 属性以优化图片加载性能（进阶实践）。
? 小技巧：用 vmin 实现“等比缩放不溢出”
.image {
width: 80vmin; /* 在宽屏下受宽度限制，窄屏下受高度限制，始终适配可见区域 */
height: auto;
}最终效果：图片将随浏览器窗口缩放实时调整尺寸，既在大屏上充分展示，又在手机端自动缩小并保持清晰比例。
