object-fit: contain 属性是一种有效的 CSS 方法,可以避免图片在固定尺寸容器中变形。以下是关于 object-fit: contain 的主要特点和使用方法:

1. 保持原始比例:
   object-fit: contain 会保持图片的原始宽高比,不会对图片进行拉伸或压缩变形。

2. 适应容器:
   图片会被缩放以适应指定的容器,同时保持其原有的宽高比。

3. 可能出现空白:
   由于保持原始比例,图片可能无法完全填满容器,因此容器内可能会出现空白区域。

4. 使用方法:
   将 object-fit: contain 应用于 标签:

img {
  width: 300px;  /* 设置容器宽度 */
  height: 200px; /* 设置容器高度 */
  object-fit: contain;
}

5. 兼容性:
   object-fit 属性在现代浏览器中得到广泛支持,但不支持 Internet Explorer[4]。

6. 其他 object-fit 值:
   除了 contain,还有 cover(覆盖)、fill(填充)、none(无)和 scale-down(缩小)等值,可根据需求选择。

7. 配合 object-position:
   如果需要调整图片在容器中的位置,可以使用 object-position 属性来进一步控制。

总之,object-fit: contain 是一个简单有效的方法,可以在保持图片原始比例的同时,使其适应指定的容器大小,从而避免图片变形。