css中怎样让img的图片不失真

在CSS中，img标签中的图片常常会因为尺寸不匹配而导致失真，如果我们想让图片不失真，有以下几种方法。

方法一：将图片尺寸与容器尺寸保持一致。我们可以在CSS中设置img标签宽度和高度为100%，然后将img标签的父容器也设置为宽度和高度均为100%。这样，无论图片被放大还是缩小，都能保持尺寸一致，避免了失真。

img{
  width: 100%;
  height: 100%;
}
.container{
  width: 100%;
  height: 100%;
} 

方法二：使用object-fit属性。object-fit属性可以设置图片在容器内的表现方式，常用的值包括“fill”（填充整个容器）、“cover”（保持宽高比例缩放填充整个容器，可能出现部分被裁剪）、“contain”（保持宽高比例缩放，完整显示图片，可能会有空白）等。

img{
  width: 100%;
  height: 100%;
  object-fit: cover;
} 

方法三：使用background-image属性。我们可以将img标签的src属性移除，然后将图片作为背景图使用，利用background-size属性控制背景图片的大小。

div{
  width: 100%;
  height: 100%;
  background-image: url(图片路径);
  background-size: cover;
} 

以上三种方法都可以让img标签中的图片避免失真，具体选择哪一种取决于实际需求和使用环境。