如何让嵌套层级元素中的图片继承祖先高度实现自动缩放？

已知当图片的直接父元素指定高度时，为img设置max-width:100%、max-height:100%可实现自动缩放（如下示例2所示）。但当图片嵌套在多层元素结构中，仅由某个祖先元素指定height:45px时（如下示例1），该规则无法生效，以下是几种快速解决方案：

问题复现代码 #

CSS 代码 #

img {
   max-height: 100%;
   max-width: 100%;
}

.container1 {
   height: 45px;
}

.container2 {
   height: 45px;
}

HTML 代码 #

<div class="container1">
   <div class="header">
      <a href='#'>
         <img src='https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg' />
      </a>
   </div>
</div>

<br/><br/><br/><br/>

<div class="container2">
    <img src="https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg" />
</div>

快速解决方案 #

方案1：逐层传递高度给中间嵌套元素 #

给所有介于图片和指定高度的祖先容器之间的元素设置height: 100%，同时将内联元素转为块级，让高度属性逐层传递到图片的直接父元素：

.container1 {
   height: 45px;
}
.container1 .header,
.container1 .header a {
   height: 100%;
   display: block;
}
img {
   max-height: 100%;
   max-width: 100%;
}

方案2：用Flexbox布局自动拉伸中间元素 #

给最外层容器设置Flex布局，中间嵌套元素会自动拉伸占满容器高度，无需手动设置height:100%：

.container1 {
   height: 45px;
   display: flex;
}
.container1 .header {
   flex: 1;
}
.container1 .header a {
   display: flex;
}
img {
   max-height: 100%;
   max-width: 100%;
}

方案3：绝对定位配合object-fit #

给图片的直接父元素设置相对定位，图片设为绝对定位并占满父元素，用object-fit保证图片比例完整：

.container1 {
   height: 45px;
}
.container1 .header a {
   position: relative;
   display: block;
   height: 100%;
}
img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
}

方案4：直接给图片父元素设置高度 #

如果结构允许，直接给图片的直接父元素（示例中的<a>标签）设置高度，让图片的max-height规则直接生效：

.container1 {
   height: 45px;
}
.container1 .header a {
   display: block;
   height: 45px;
}
img {
   max-height: 100%;
   max-width: 100%;
}

内容的提问来源于stack exchange，提问作者gene b.