Ich benutzedisplay: flex; um ein Bild zu zentrieren undmax-width / max-height, um die Größe zu bestimmen. Es gibt mehrere dieser Bilder - einige breit, einige hoch, einige quadratisch - und ich möchte sicher sein, dass sie alle eine angemessene Größe haben, um sie anzuzeigen.

Ich bin davon ausgegangen, dass das Bild proportional zur Breite bleiben sollte, wenn es beispielsweise die maximale Breite und nicht die Höhe erreicht.

Hier ist das Problem, das ich habe. In Chrom sieht es für alle Bilder perfekt aus. In Firefox und Edge sind sie überproportional verzerrt.

.image_block {
  padding: 20px;
  height: 140px;
  background: #eee;
  display: flex;
}
.image_block img {
  margin: auto;
  max-width: 170px;
  max-height: 90px;
}

<div class="image_block">
  <img src="http://www.paulruocco.com/jobjacket/assets/uploads/company_uploads/image_070816132332577fe19495484.png" />
</div>

Es ist mir egal, mit welchem Ergebnis ich ende (ich kann auch damit arbeiten), aber ich möchte, dass alle drei übereinstimmen. Was kann ich tun, um dies zu erreichen?