Image height: auto doesn't work on chrome

Admin 1
Viewed 9761

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>

google-chrome css html
2 Answers

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.

user_58606480 

<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

user_89800000
Related