我创建了一个网站,其图像宽度为160像素. 为了避免失真,我没有设置高度(或者我添加高度：auto;). 现在应自动设置图像高度(图像为16/9时为90像素). 但是当我用Chrome打开它
... . . 我创建了一个网站,其图像宽度为160像素.
为了避免失真,我没有设置高度(或者我添加高度：auto;).
现在应自动设置图像高度(图像为16/9时为90像素).
但是当我用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>.
解决方法
. 试试这个：
<div style="display:flex;"> <img src="https://i.imgur.com/hHzrRsf.jpg" style="width:160px;align-self: center;"></div>
默认情况下,align-self设置为拉伸并破坏图像的原始高度.
. . .. ...