一、背景介绍

  1. 展示区域的大小固定，而图片的大小不固定，导致图片变形。
  2. 图片缩放时，如果处理不当，会导致图片失真或变形。

二、CSS等比例缩放方法

1. 使用max-width和max-height

img {
  max-width: 100%;
  max-height: 100%;
}

2. 使用object-fit属性

object-fit属性可以控制替换元素（如<img>）内容的尺寸和形状。它允许您指定如何调整替换元素的内容大小以适应其容器。

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

3. 使用background-size属性

.background {
  background-image: url('image.jpg');
  background-size: cover;
}

三、兼容性考虑

  1. object-fit属性在IE11及以下版本中不支持。
  2. background-size属性在IE浏览器中不支持。

四、总结