CSS 统一不同尺寸图标显示：利用 object-fit 属性
在前端开发中，我们经常会遇到项目中引入的图标尺寸不统一的问题，例如有的图标是 24x24 像素，有的是 32x32 像素，还有的长宽比例并不一致。如果直接给这些图标设置固定的宽高，很容易导致图标拉伸变形，影响页面美观。而 CSS 的 object-fit 属性可以很好地解决这个问题，让我们无需手动调整每个图标的原始尺寸，就能让不同尺寸的图标在固定容器内统一显示。
object-fit 属性介绍
object-fit 属性用于指定可替换元素（如 <img>、<video>、<object> 等）的内容如何适应其容器的尺寸。该属性有五个常用取值，不同取值的效果差异如下：
| 属性值 | 说明 |
|---|---|
| fill | 默认值，内容拉伸填满整个容器，不保持原始比例，可能导致变形 |
| contain | 保持原始比例缩放内容，直到内容完全适应容器，容器可能有空白区域 |
| cover | 保持原始比例缩放内容，直到内容完全覆盖容器，超出容器的部分会被裁剪 |
| none | 保持内容原始尺寸，不缩放，超出容器的部分会被裁剪 |
| scale-down | 内容尺寸在 none 和 contain 之间选择较小的那个，即内容不会比原始尺寸大 |
统一图标显示的实现方案
要实现不同尺寸图标的统一显示，我们通常的做法是先给图标设置统一的容器尺寸，再结合 object-fit 属性调整内容适配方式。以下是具体的实现步骤和示例：
1. HTML 结构
我们首先定义一组图标容器，内部放置不同尺寸的图标图片：
<div class="icon-wrapper"> <img src="https://www.ipipp.com/icon-24.png" alt="24像素图标"> </div> <div class="icon-wrapper"> <img src="https://www.ipipp.com/icon-32.png" alt="32像素图标"> </div> <div class="icon-wrapper"> <img src="https://www.ipipp.com/icon-rect.png" alt="矩形图标"> </div>
2. CSS 样式设置
接下来给图标容器和图片设置样式，固定容器尺寸，同时通过 object-fit 控制图标显示效果：
/* 统一图标容器样式 */
.icon-wrapper {
width: 40px;
height: 40px;
border: 1px solid #e5e5e5;
border-radius: 4px;
margin: 8px;
display: inline-block;
}
/* 图标统一适配规则 */
.icon-wrapper img {
width: 100%;
height: 100%;
/* 保持原始比例，完整显示图标，容器留白 */
object-fit: contain;
/* 如果需要图标完全覆盖容器，不留空白，可以改用 cover */
/* object-fit: cover; */
}3. 效果说明
上述代码中，所有图标容器都被固定为 40x40 像素的尺寸，内部的图标图片会占满整个容器（width:100%; height:100%）。当 object-fit 设置为 contain 时，不同尺寸的图标都会保持原始比例缩放，直到完整放入 40x40 的容器中，不会出现拉伸变形的问题，只是容器四周可能会有少量空白。
如果希望图标完全填满容器，不留空白，可以将 object-fit 改为 cover，此时图标会保持比例缩放直到覆盖整个容器，超出容器的部分会被裁剪，适合对图标完整性要求不高的场景。
注意事项
object-fit属性仅对可替换元素生效，普通的元素如 <div>、<span> 无法使用该属性。如果需要兼容旧版本浏览器（如 IE 系列），
object-fit属性是不支持的，此时可以使用背景图的方式替代，通过background-size属性实现类似效果。当使用
cover值时，如果图标的关键内容在边缘位置，可能会被裁剪，需要根据实际图标内容选择合适的属性值。
总结：
object-fit属性为我们提供了非常便捷的方式来处理不同尺寸可替换元素的适配问题，在统一图标显示的场景中合理使用该属性，可以大幅减少手动调整图标尺寸的工作量，提升开发效率。