el-img 组件渲染的图片拉伸了 怎么处理

如果 el-img 组件渲染的图片拉伸了，可以尝试以下几种处理方法：

1. 设置图片的宽度和高度

可以通过设置图片的宽度和高度来避免图片的拉伸，例如：

<el-img
  src="your_image_url"
  style="width: 200px; height: 200px;"
></el-img>

2. 指定图片的 object-fit 属性

可以通过设置图片的 object-fit 属性来控制图片的显示方式，例如：

<el-img
  src="your_image_url"
  style="object-fit: cover;"
></el-img>

object-fit 属性有以下几个值：

• fill：默认值，拉伸图片以适合容器。
• contain：按比例缩小图片，使其适合容器。
• cover：按比例缩放图片，使其完全覆盖容器。
• none：不对图片进行任何调整。
• scale-down：比较 contain 和 none，选择缩小比例较小的那个。

3. 裁剪图片

如果图片的高度和宽度比例与容器不一致，可以通过裁剪图片来避免拉伸，例如：

<el-img
  src="your_image_url"
  style="object-fit: cover; object-position: center;"
></el-img>

object-position 属性用于指定图片在容器中的位置，有以下值：

• left
• right
• center
• top
• bottom
• left top
• left bottom
• right top
• right bottom

通过调整 object-position 属性的值可以实现裁剪图片的效果。