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中的问题，您可以将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>