Центр выдачи 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

Чтобы исправить проблему в 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>

Answer 2

Попробуйте добавить: 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>