可以尝试使用 object-fitobject-position 属性来解决图片拉伸变形的问题。

object-fit 属性可以设置图片在容器中的填充方式,常用的取值有 covercontainfill 等。

object-position 属性可以设置图片在容器中的位置,常用的取值有 topcenterbottomleftright 等。

示例代码:

<el-img src='图片地址' style='width: 200px; height: 200px; object-fit: cover; object-position: center;'></el-img>

这里将 el-img 组件的宽高设置为 200px,然后使用 object-fitobject-position 属性来控制图片的填充方式和位置。可以根据实际情况调整这两个属性的取值,以达到最佳效果。

饿了么 el-img 组件图片拉伸变形解决方案:object-fit 和 object-position 属性示例

原文地址: https://www.cveoy.top/t/topic/nkNE 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录