首页 新闻 会员 周边 捐助

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，造成图片变形

dudu的主页 dudu | 高人七级 | 园豆：28699
提问于：2025-01-05 07:14

stackoverflow上的相关问题：How to force image resize and keep aspect ratio?

 – dudu 5天前
< >
分享
所有回答(3)
0

在 chrome 中可以通过 max-height: fit-content; 解决，但 safari 与 firefox 都不支持这个样式

dudu | 园豆：28699 (高人七级) | 2025-01-05 08:28

在 safari 与 firefox 可以通过 object-fit: contain; 解决图片本身的问题，但图片上下会空出一块

支持(0) 反对(0) dudu | 园豆：28699 (高人七级) | 2025-01-05 08:33

目前找到的唯一可以接受的稍有不足的解决方法是将高度设置为 auto

img {
  max-width: 100% !important;
  height: auto !important;
}

不足之处是通过更小的高度值缩小图片就不起作用

<img style="height: 100px" src="...">

支持(0) 反对(0) dudu | 园豆：28699 (高人七级) | 2025-01-05 08:53
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>
echo_lovely | 园豆：1568 (小虾三级) | 2025-01-06 08:31
0

看看............

tea2007 | 园豆：62 (初学一级) | 2025-01-06 10:38
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。