img Höhe Auto funktioniert nicht auf Chrom

Question

Ich habe eine Website mit Bildern, die eine Breite von 160px haben. Um eine Verzerrung zu vermeiden, stelle ich die Höhe nicht ein (oder ich füge hinzu). Jetzt sollte die Bildhöhe automatisch eingestellt werden (90px wenn das Bild 16/9 ist).

Aber wenn ich es mit Chrome die Bildhöhe öffnen wird auf die ursprüngliche Bildhöhe eingestellt (1080px), während es noch eine Breite von 160px hat daher seine sehr

verzerrt

Wissen Sie, warum es mit Chrom nicht funktioniert ? (Weder auf Mobile noch auf Desktop) Und wie kann ich es zum Laufen bringen?

Eine Lösung wäre, die Höhe manuell auf 90px zu setzen, aber ich möchte die Breite auf 90% der Eltern festlegen, die die Breite auf verschiedenen Bildschirmen unterschiedlich macht. Daher ist eine eingestellte Höhe nicht sinnvoll. Aber ich will auch nicht JS verwenden

Distortion on chrome but not on firefox 
 
<div style="display:flex;"> 
 
    <img src="https://i.imgur.com/hHzrRsf.jpg" style="width:160px;"> 
 
</div>

Answer 1

Try this:

<div style="display:flex;"> 
 
    <img src="https://i.imgur.com/hHzrRsf.jpg" style="width:160px;align-self: center;"> 
 
</div>

standardmäßig align-self wird auf stretch und zerstören die ursprüngliche Höhe Ihres Bildes.

Answer 2

<div style="display:flex;"> 
 
<img src="https://i.imgur.com/hHzrRsf.jpg" style="width:160px; height:100%;"></div> 
 
</div>

Sie können Hight 100% verwenden, die einfach für Sie