CSS問題中心和IE11中圖像的“最大寬度”

Question

我有一個基本的圖像縮略圖，可以在Firefox / Chrome中正常工作，但在IE11中則無法工作。

圖像的max-width不被尊重，並以原樣增大。

 .thumb { display: flex; align-items: center; justify-content: center; cursor: pointer; font: 0/0 a; height: 4.5rem; width: 4.5rem; padding: 0.25rem; border: 1px solid #9E9E9E; border-radius: 0.1875rem; box-shadow: 0 1px 6px #BDBDBD; cursor: pointer; margin: 0 0.5rem 0 0; text-align: center; } .thumb img { display: inline-block; max-height: 90%; max-width: 90%; } 

 <div class="thumb" > <img src="https://via.placeholder.com/250x90"> </div> 

Answer 1

嘗試添加： min-width:1px; 到你的形象。 這是IE的已知錯誤。

 .thumb { display: flex; align-items: center; justify-content: center; cursor: pointer; font: 0/0 a; height: 4.5rem; width: 4.5rem; padding: 0.25rem; border: 1px solid #9E9E9E; border-radius: 0.1875rem; box-shadow: 0 1px 6px #BDBDBD; cursor: pointer; margin: 0 0.5rem 0 0; text-align: center; } .thumb img { display: inline-block; max-height: 90%; max-width: 90%; min-width:1px; } 

 <div class="thumb" > <img src="https://via.placeholder.com/250x90"> </div> 

Answer 2

要解決IE11中的問題，您可以在img元素中添加flex: 1請參見下面的演示：

 .thumb { display: flex; align-items: center; justify-content: center; cursor: pointer; font: 0/0 a; height: 4.5rem; width: 4.5rem; padding: 0.25rem; border: 1px solid #9E9E9E; border-radius: 0.1875rem; box-shadow: 0 1px 6px #BDBDBD; cursor: pointer; margin: 0 0.5rem 0 0; text-align: center; } .thumb img { display: inline-block; max-height: 90%; max-width: 90%; flex: 1; /* ADDED */ } 

 <div class="thumb" > <img src="https://via.placeholder.com/250x90"> </div>