图片保持比例并最大化显示

[Dream4ever]

需求描述

在做一个页面的时候，对一批图片（缩略图）有如下要求：

• 图片长边的尺寸为 160px
• 图片保持原始比例显示

解决方案

.img-container>img {
  width: 160px;
  height: 160px;
  object-fit: contain;
}

属性值分析

object-fit 属性可以让图片在父容器中保持原始比例显示。

• 属性值为 contain 时，图片会保持原始比例显示，同时长边与父元素尺寸相同。
• 属性值为 none 时，图片会保持原始比例和原始尺寸显示。
• 属性值为 scale-down 时，图片会保持原始比例显示，同时在属性值 contain 和 none 之间选择最终尺寸更小的那个。

参考资料

• object-fit: CSS | MDN
• object-fit | CSS-Tricks