当图片嵌套在多层无显式高度的中间容器中时，仅靠 max-width: 100%; max-height: 100% 无法响应远祖容器的高度限制；需将路径上所有中间元素显式设为 height: 100%，打通高度继承链。
当图片嵌套在多层无显式高度的中间容器中时，仅靠 `max-width: 100%; max-height: 100%` 无法响应远祖容器的高度限制；需将路径上所有中间元素显式设为 `height: 100%`，打通高度继承链。
在 CSS 中，max-height: 100% 的计算基准是直接父元素的高度，而非任意祖先元素。若父元素未设置明确高度（或高度由内容撑开），则 100% 会解析为 auto，导致约束失效——这正是 Example 1 中图片未按 .container1 的 45px 高度缩放的根本原因。
解决的关键在于：确保从目标图片到指定高度的祖先之间，每一级中间容器都具备可计算的、继承自上层的高度。最可靠的方式是将整条 DOM 路径上的中间元素（如 .header、<a></a> 标签等）统一设置 height: 100%，从而形成一条“高度透传链”。
以下为推荐实现方案：
.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>
⚠️ 注意事项：
-
height: 100%仅在父元素具有明确高度值（如px、rem或vh）时才有效；若父元素高度为min-height或flex容器未设align-items: stretch，可能仍不生效； - 若使用 Flex 布局，可替代性地为中间容器添加
display: flex+align-items: center+justify-content: center，并保留img { max-height: 100%; max-width: 100%; }； - 推荐搭配
object-fit: contain（保持比例居中）或object-fit: cover（裁剪填充），避免图片变形； - 避免对
<a></a>等内联元素直接设height: 100%时出现布局异常，此时可加display: block或inline-block。
总结：CSS 高度百分比依赖显式继承链，没有“自动向上查找最近有高度祖先”的机制。主动控制中间节点的高度行为，是实现深层嵌套图片自适应的必要且简洁的工程实践。
