img和背景图处理图片不拉伸_img固定宽度和高度，不规则图片变形问题的解决方法

要使img标签固定宽度和高度，同时又不让不规则图片变形，可以使用以下两种方法：

1. 使用CSS的object-fit属性

object-fit属性可以用来控制图片在容器中的适应方式，常用的取值有cover、contain、fill、none等。其中，cover和contain可以实现图片的等比缩放，同时填充满容器，不留空白、不变形。例如，下面的代码可以将图片的宽度和高度都固定为200px，并且保持原图比例不变形：

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

2. 将图片作为背景图处理

将图片作为背景图处理也是一个常见的方法，可以使用CSS的background-size属性来控制背景图的适应方式。background-size属性可以用来设置背景图的尺寸，常用的取值有cover、contain、auto、100%等。例如，下面的代码可以将背景图的宽度和高度都固定为200px，并且保持原图比例不变形：

.container {
  width: 200px;
  height: 200px;
  background-image: url('path/to/image.jpg');
  background-size: cover;
}

需要注意的是，将图片作为背景图处理时，需要将img标签的src属性清空或者设置为透明像素。例如：

<img src="data:image/png;base64,iVBORw0KG... " alt="" style="display: none;">
<div class="container" style="background-image: url('path/to/image.jpg');"></div>

这样就可以避免图片同时以img标签和背景图的方式加载，导致页面加载过慢。