饿了么 el-img 组件图片拉伸变形解决方案:object-fit 和 object-position 属性示例
可以尝试使用 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 属性来控制图片的填充方式和位置。可以根据实际情况调整这两个属性的取值,以达到最佳效果。
原文地址: https://www.cveoy.top/t/topic/nkNE 著作权归作者所有。请勿转载和采集!