css：移动端适配时如何保持图片原始比例
0
悬赏园豆：30 [待解决问题] 
图片指定了固定的宽度与高度，比如这篇博文 https://www.cnblogs.com/cmt/p/18568184
<img style="width: 800px; height: 340px" src="https://img2024.cnblogs.com/blog/35695/202411/35695-20241125172331272-1055233660.jpg"> 移动端适配时通过 max-width 设置最大宽度为100%
img { max-width: 100% !important; } 这样设置后，图片在移动端屏幕上的宽度变成370px，但高度依然为340px，造成图片变形
所有回答(3)
0
在 chrome 中可以通过 max-height: fit-content; 解决，但 safari 与 firefox 都不支持这个样式
在 safari 与 firefox 可以通过 object-fit: contain; 解决图片本身的问题，但图片上下会空出一块
目前找到的唯一可以接受的稍有不足的解决方法是将高度设置为 auto
img { max-width: 100% !important; height: auto !important; } 不足之处是通过更小的高度值缩小图片就不起作用
<img style="height: 100px" src="..."> 
0
我这有个vue，通过 object-fit: contain 实现的，保证图片宽高比然后缩放
<el-table-column label="图片" align="center" prop="imgaddr" width="200px"> <template slot-scope="scope"> <img :src="scope.row.imgaddr" style="height: 100px; width: 150px; object-fit: contain ;"> </template> </el-table-column> 0
看看............
stackoverflow上的相关问题：How to force image resize and keep aspect ratio?
– dudu 11个月前