Flexbox双图布局在IE11中图片高度不缩放问题求助

问题描述 #

用CSS Flexbox实现两张图片并排布局，Edge和Firefox中屏幕缩放时图片能同时适配宽高，但IE11里图片仅宽度正常缩放，高度固定不变。意外发现给<img>标签包裹<a href>后，图片就能正常缩放。

原代码 #

HTML #

<section>
   <div class="flex">
      <div class="col-topnieuws post-media">
          <img src="images/cont/8663.jpg" alt="Description 1">
      </div>
      <div class="col-topnieuws post-media">
          <img src="images/cont/8664.jpg" alt="Description 2">
      </div>
   </div>
</section>

CSS #

.flex {
   display: flex;
   flex-wrap: wrap;
 }

.flex .col-topnieuws {
   width: calc((100% / 2) - (50px / 2));
   margin-right: 25px;
   margin-bottom: 25px;
   display: flex;
   flex-direction: column;
   flex: 1 1 200px;
}

.post-media {
   position: relative;
   overflow: auto;
}

img {
   width: auto;
   max-width: 100%;
   height: auto;
   margin: 0;
   padding: 0;
   border: none;
   line-height: normal;
   vertical-align: middle;
 }

修复后（添加a标签）的HTML #

<section>
   <div class="flex">
     <div class="col-topnieuws post-media">
       <a href="#">
          <img src="images/cont/8663.jpg" alt="Description 1">
       </a>
     </div>
     <div class="col-topnieuws post-media">
       <a href="#">
          <img src="images/cont/8664.jpg" alt="Description 2">
       </a>
     </div>
   </div>
</section>

解决思路与替代方案 #

问题根源 #

IE11的Flexbox实现存在bug：当替换元素（如<img>）直接作为flex容器的子元素时，无法正确解析height:auto的自适应逻辑，导致高度无法随宽度按比例缩放。而<a>标签作为行内块元素，会形成一个包含块，让<img>的尺寸计算基于这个包含块，避开了IE11的Flexbug。

无需添加a标签的修复方案 #

1. 给img的父容器.post-media添加Flex属性
   让父容器成为Flex容器，确保内部图片能正确对齐并缩放：

   .post-media {
     position: relative;
     overflow: auto;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   

2. 增强img的尺寸约束
   添加max-height:100%确保图片高度不会超出容器，同时维持宽高比：

   img {
     width: auto;
     max-width: 100%;
     height: auto;
     max-height: 100%;
     margin: 0;
     padding: 0;
     border: none;
     line-height: normal;
     vertical-align: middle;
   }
   

3. 调整flex项的属性写法
   IE11对复合flex属性的解析可能有问题，拆分属性并优化基准尺寸：

   .flex .col-topnieuws {
     margin-right: 25px;
     margin-bottom: 25px;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: calc((100% / 2) - 25px);
   }
   

内容的提问来源于stack exchange，提问作者Nico van Wijk