[分享]css不让缩小图片不失真

CSS可以控制图片的大小，但如果让图片缩小过程中不失真，代码的书写就有些复杂了。img { width: auto; / 控制图片宽度自适应 / height: 100; / 控制图片高度自适应 / ...

CSS可以控制图片的大小，但如果让图片缩小过程中不失真，代码的书写就有些复杂了。

img { 
  width: auto; /* 控制图片宽度自适应 */ 
  height: 100%; /* 控制图片高度自适应 */
  max-width: 100%; /* 控制图片最大宽度为100% */ 
  max-height: 100%; /* 控制图片最大高度为100% */ 
  object-fit: scale-down; /* 让图片缩小过程中不失真 */ 
} 

在这段代码中，我们分别控制了图片的宽和高自适应，并将最大宽和最大高限制为100%。接着，我们使用了object-fit属性，取值为scale-down，这是一个比较神奇的属性，可以让图片在缩小的过程中不失真。如果你喜欢，你还可以将object-fit属性改为cover或contain，根据自己的需要进行调整。

除此之外，如果你想要调整图片的位置，可以使用object-position属性，例如：

img { 
  width: auto; 
  height: 100%; 
  max-width: 100%; 
  max-height: 100%; 
  object-fit: scale-down; 
  object-position: center; /* 将图片居中 */
} 

在这段代码中，我们使用了object-position属性，并将取值设置为center，让图片在容器中居中显示。

综上所述，我们可以通过控制图片的属性来避免图片在缩小过程中失真，可以为我们的网页提供更好的用户体验。