图像高度：自动不适用于chrome

Question

I created a website with images that have a width of 160px . To avoid a distortion I don't set the height (or I add height:auto; ). Now the image height should be automaticly set ( 90px when the image is 16/9).

But when I open it with Chrome the image height is set to the original image height ( 1080px ) while it still has a width of 160px , therefore its very distorted

Do you know why it doesnt work with chrome? (Neither on Mobile nor on Desktop) And how can I make it work.

One solution would be to se the height manually to 90px , but I want to set the width to 90% of the parent which makes the width different on different screens. Therefore a set height doesn't make sense. But I also don't want to use JS

 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> 

By default, align-self is set to stretch and remove the original height of your image.

Answer 2

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

You can use Hight 100% that will be easy for you to understand