本文详解为何 `max-height: 15%` 对图片无效，并推荐使用 `vw`（视口宽度单位）配合 `max-width`/`max-height` 实现真正响应式图片缩放，兼容 bootstrap 环境。
在响应式网页开发中，让图片随浏览器窗口动态缩放是常见需求。但许多开发者会发现，像 .image { max-height: 15%; width: auto; } 这样的 CSS 并未生效——根本原因在于：百分比高度（如 15%）在 CSS 中默认依赖于父容器的明确高度。而 <ul> 和 <li> 元素在标准文档流中高度由内容决定，本身没有设定 height，导致其子元素（<img>）的 max-height: 15% 实际计算为 15% of 0px → 0px，图片因此被强制压缩至不可见或失效。
✅ 正确解法：改用视口相对单位（Viewport Units）
vw（viewport width）和 vh（viewport height）直接基于浏览器可视区域尺寸计算，无需依赖父容器高度，天然适合响应式图像控制：
.image {
max-width: 80vw; /* 最宽不超过视口宽度的 80%，避免溢出 */
max-height: 60vh; /* 最高不超过视口高度的 60%，兼顾竖屏体验 */
width: auto;
height: auto;
object-fit: contain; /* 保持宽高比，不拉伸变形 */
}同时建议为 <img> 添加 display: block 避免行内元素默认的底部空白：
<ul>
<li>
<img class="image" src="imgs/pie-chart.png" alt="数据图表">
</li>
</ul>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免仅设 width: 10vw（如原答案所示），它会强制固定宽度，忽略图片原始比例，可能导致模糊或裁切；应优先使用 max-width + width: auto 组合；
- 若项目已引入 Bootstrap，可叠加其工具类增强兼容性，例如添加 img-fluid（Bootstrap 5）或 img-responsive（Bootstrap 4），但需注意其内部也依赖 max-width: 100% 和 height: auto，与上述方案逻辑一致，可共存；
- 在移动端 Safari 等浏览器中，确保 <meta name="viewport" content="width=device-width, initial-scale=1"> 已正确声明，否则 vw 单位可能计算异常。
? 总结：响应式图片的核心不是“百分比”，而是“参照系”。当父容器高度不确定时，vw/vh 是更可靠的选择；结合 max-width、auto 尺寸与 object-fit，即可在任意屏幕下优雅缩放，既保证视觉完整性，又提升跨设备体验。
