限制和圖像最大寬度到父容器和重新縮放高度在 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 item - 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>