To dość stare pytanie, ale miałem dokładnie ten sam irytujący problem, w którym wszystko działało dobrze dla Chrome / Edge (z właściwością dopasowania do obiektu), ale ta sama właściwość css nie działała w IE11 (ponieważ jest nieobsługiwana w IE11), skończyło się używając elementu "figure" HTML5, który rozwiązał wszystkie moje problemy.
Osobiście nie użyłem zewnętrznego znacznika DIV, ponieważ w moim przypadku nie pomogło, więc uniknąłem zewnętrznego znacznika DIV i po prostu zastąpiłem elementem „figure”.
Poniższy kod wymusza ładną redukcję / skalowanie obrazu (bez zmiany oryginalnego współczynnika proporcji).
<figure class="figure-class">
<img class="image-class" src="{{photoURL}}" />
</figure>
i klasy css:
.image-class {
border: 6px solid #E8E8E8;
max-width: 189px;
max-height: 189px;
}
.figure-class {
width: 189px;
height: 189px;
}