当图片嵌套在多层容器中，而仅最外层祖先设置了固定高度时，需通过显式继承高度链使 max-width:100% 和 max-height:100% 生效，核心是让中间所有父元素高度“透传”至图片。
当图片嵌套在多层容器中，而仅最外层祖先设置了固定高度时，需通过显式继承高度链使 `max-width:100%` 和 `max-height:100%` 生效，核心是让中间所有父元素高度“透传”至图片。
在 CSS 中，max-height: 100% 和 max-width: 100% 并非相对于视口或文档根，而是相对于最近的、具有明确高度（非 auto）的包含块（containing block）。若图片的直接父元素高度为 auto（默认行为），即使其祖先设置了 height: 45px，该约束也不会自动向下传递——中间层级会按内容自然撑高，导致图片失去参照基准，无法按比例缩放。
✅ 正确解法：构建连续的高度继承链
从最外层高度容器开始，逐级将 height: 100% 应用于所有中间容器（包括 <a></a>、<div> 等），确保高度约束能逐层向下透传，最终使 <code><img alt="如何让图片在任意深度的父级高度约束下自动缩放适配" > 的 100% 高度有据可依。
以下是推荐的 CSS 实现：
.container1,
.container2 {
height: 45px;
}
/* 关键：为中间所有父级显式设置 height: 100% */
.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" alt="logo" />
</a>
</div>
</div>
<div class="container2">
<img src="https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg" alt="logo" />
</div>⚠️ 注意事项：
- 所有中间元素（如
.header、<a></a>）必须无额外 padding/margin/border 干扰，否则height: 100%可能因盒模型溢出失效；建议搭配box-sizing: border-box； - 若中间元素使用
flex或grid布局，也可用flex: 1或align-items: stretch替代height: 100%，语义更清晰； -
object-fit: contain推荐与max-*搭配使用，避免图片变形，同时保证内容完整可见； - 避免对
<img alt="如何让图片在任意深度的父级高度约束下自动缩放适配" >设置height: 100%同时又设max-height: 100%——前者会强制拉伸，后者才负责弹性限制，二者逻辑不同，应优先依赖max-*+height: 100%在父级上实现约束。
总结：CSS 高度继承不是自动的，而是“显式链式传递”的过程。只要确保从设定高度的祖先到图片之间，每一层容器都拥有可计算的高度（通常是 height: 100%），图片就能可靠响应 max-width/max-height 规则，实现跨层级的自适应缩放。
