我创建的网站的图片宽度为160px。
为了避免失真，我没有设置高度（或者我添加height:auto;）。
现在应该自动设置图像高度（图像为16/9时90px）。
但是当我用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>
答案 0 :(得分：14)
试试这个：
<div style="display:flex;">
<img src="https://i.imgur.com/hHzrRsf.jpg" style="width:160px;align-self: center;">
</div>
默认情况下，align-self设置为stretch并破坏图片的原始高度。
答案 1 :(得分：1)
<div style="display:flex;">
<img src="https://i.imgur.com/hHzrRsf.jpg" style="width:160px; height:100%;"></div>
</div>