将尺寸和图片的最大宽度限制为父容器，并且缩放比例高度在IE11中不起作用

Question

我有下面的代码。

我想强制将图像max-width约束/调整为容器的width，并且高度是自由的。它适用于Chrome / Firefox，但不适用于IE11

.cimage { 
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid red;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-pack: center;
    justify-content: center;
    padding: .75rem;
    width: 5.5rem;
}

.cimage img { 
  max-width: 100%;
  min-width:1px;
}

<div class="cimage">
   <a href="/">
    <img src="https://via.placeholder.com/250x150">
   </a>
</div>

IE屏幕截图：

Answer 1

将flex: 1或min-width: 1px添加到 flex项目-a元素中，也可以在IE11中进行修复。参见下面的演示：

.cimage { 
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid red;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-pack: center;
    justify-content: center;
    padding: .75rem;
    width: 5.5rem;
}

.cimage img { 
  max-width: 100%;
  min-width:1px;
}

.cimage a { /* ADDED */
  flex: 1;
}

<div class="cimage">
   <a href="/">
    <img src="https://via.placeholder.com/250x150">
   </a>
</div>