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

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

object-position 属性可以设置图片在容器中的位置,常用的取值有 top、center、bottom、left、right 等。

示例代码:

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

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

饿了么 el-img 组件渲染的图片拉伸变形了 怎么处理有示例代码么

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

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