css——图片缩放，拉伸，变形的解决办法

在CSS中，可以使用object-fit属性来控制图片的缩放、拉伸和变形行为。object-fit属性可以设置为以下几个值：

• fill：默认值，拉伸图片以填满容器。
• contain：保持图片的宽高比，缩放图片以完全装进容器内。
• cover：保持图片的宽高比，缩放图片以完全覆盖容器。
• none：不改变图片大小，图片可能会溢出容器。
• scale-down：效果跟none或contain中较小的那个相同。

示例代码：

/* 使图片完全填充容器，可能导致变形 */
img.fill {
  object-fit: fill;
}
 
/* 保持图片的宽高比，缩放图片以完全装进容器内，不裁切图片 */
img.contain {
  object-fit: contain;
}
 
/* 保持图片的宽高比，缩放图片以完全覆盖容器，可能会裁切图片 */
img.cover {
  object-fit: cover;
}
 
/* 不改变图片大小，图片可能会溢出容器 */
img.none {
  object-fit: none;
}
 
/* 效果跟none或contain中较小的那个相同 */
img.scale-down {
  object-fit: scale-down;
}

在HTML中使用这些类：

<img src="image.jpg" class="fill" />
<img src="image.jpg" class="contain" />
<img src="image.jpg" class="cover" />
<img src="image.jpg" class="none" />
<img src="image.jpg" class="scale-down" />

使用object-fit时，通常还会配合width和height属性来控制图片的尺寸，以及object-position属性来控制图片在容器中的位置。