IE11 中图像的 CSS 问题中心和“最大宽度”答案

【问题标题】：CSS issue center and 'max-width' for an image in IE11IE11 中图像的 CSS 问题中心和“最大宽度”
【发布时间】：2019-07-14 06:24:48
【问题描述】：

我有一个基本的图像缩略图，可以在 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>

【问题讨论】：

你能分享截图吗，我在IE11中找不到任何问题
@Kikkuz，附上截图，也改变了占位符图片，请重新检查
不是，是我默认的Windows 7，IE11；最初的占位符是平方的，几乎没问题，我更改了宽度远大于高度的占位符；截图是IE11中的问题
现在可以重现问题...

标签： html css internet-explorer flexbox

【解决方案1】：

尝试在您的图片中添加：min-width:1px;。这是IE的一个已知bug。

.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>

【讨论】：

【解决方案2】：

要解决 IE11 中的问题，您可以将 flex: 1 添加到 img 元素 - 请参阅下面的演示：

.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>

【讨论】：

为什么在不需要的时候使用 flex？尤其是在 IE 上。
它是一个灵活的 item 对，所以可以使用 flex: 1... :)