img height auto对chrome不起作用

Question

我创建了一个网站,其图像的宽度为160px.为避免失真,我不设置高度(或我添加height:auto;).现在应该自动设置图像高度(90px当图像是16/9时).

但是当我用Chrome打开它时,图像高度被设置为原始图像高度(1080px),而它仍然具有宽度160px,因此它非常扭曲

你知道为什么它不能用于chrome吗？(无论是在手机上还是在桌面上)我怎样才能让它发挥作用.

一种解决方案是手动将高度90px设置为,但我想将宽度设置90%为父级,这使得不同屏幕上的宽度不同.因此,设定高度没有意义.但我也不想使用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

试试这个:

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

默认情况下,align-self设置为stretch并破坏图像的原始高度.