当图片嵌套在多层无显式高度的父元素中时，仅设置 max-width: 100%; max-height: 100% 无法生效；需确保从高度定义容器到图片路径上的每一层都继承 height: 100%，才能触发百分比高度计算。
当图片嵌套在多层无显式高度的父元素中时，仅设置 `max-width: 100%; max-height: 100%` 无法生效；需确保从高度定义容器到图片路径上的每一层都继承 `height: 100%`，才能触发百分比高度计算。
在 CSS 中，百分比高度（如 height: 100% 或 max-height: 100%）仅对具有明确高度的父容器生效，且该父容器必须是直接父级（除非中间所有祖先元素都显式设为 height: 100%）。这意味着：若 .container1 设有 height: 45px，但其子元素 .header 和 <a></a> 没有指定高度，它们将按内容自然撑高，导致内部 <img> 的 max-height: 100% 实际参考的是 0（因父级未提供有效高度上下文），从而失效。
✅ 正确做法是：沿 DOM 路径向上，为每一层中间容器显式设置 height: 100%，使其继承父容器高度，最终为图片提供有效的百分比计算基准。
以下是推荐的 CSS 解决方案：
.container1,
.container2 {
height: 45px;
}
/* 关键：逐层传递高度 */
.container1 .header,
.container1 .header > a,
.container1 .header > a > img {
height: 100%;
}
img {
max-width: 100%;
max-height: 100%;
object-fit: contain; /* 可选：保持宽高比，避免拉伸 */
}
对应 HTML 结构保持不变：
<div class="container1">
<div class="header">
<a href="#">
<img src="https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?x-oss-process=image/resize,p_40" alt="logo"></a>
</div>
</div>
<div class="container2">
<img src="https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?x-oss-process=image/resize,p_40" alt="logo">
</div>
⚠️ 注意事项：
-
height: 100%要求所有上级容器（直到最近的高度定义祖先）都参与链式继承，缺一不可； - 避免使用
display: inline或float等会破坏块级高度继承的布局方式；推荐使用display: block或flex/grid布局增强可控性； - 若中间某层使用
flex容器，可改用flex: 1或align-items: stretch达到类似效果，更健壮； -
object-fit: contain推荐配合使用，确保图片在缩放后不畸变，完整可见；若需填满区域可用cover（可能裁剪）。
总结：CSS 百分比高度依赖“高度上下文链”，并非自动穿透多层祖先。通过显式声明中间元素 height: 100%，即可构建可靠的高度传递路径，使深层嵌套图片真正响应顶层容器尺寸。
