如何通过CSS使ul>li>img下的所有图标尺寸统一（匹配最小图标）

我需要通过CSS让ul>li>img下的所有图标尺寸统一（和其中最小的图标尺寸一致）。所有图标在文件系统中实际都是16x16的尺寸，文件信息如下：

$ file *
github.com.ico:        MS Windows icon resource - 2 icons, 16x16, 32 bits/pixel, 32x32, 32 bits/pixel
joinmastodon.org.ico:  MS Windows icon resource - 3 icons, 16x16, 32 bits/pixel, 32x32, 32 bits/pixel
stackoverflow.com.ico: MS Windows icon resource - 2 icons, 16x16, 32 bits/pixel, 32x32, 32 bits/pixel
www.linkedin.com.ico:  MS Windows icon resource - 1 icon, 16x16, 32 bits/pixel
www.malt.com.ico:      MS Windows icon resource - 3 icons, 16x16, 32 bits/pixel, 16x16, 32 bits/pixel
www.malt.fr.ico:       PNG image data, 16 x 16, 8-bit colormap, non-interlaced
www.upwork.com.ico:    MS Windows icon resource - 3 icons, 16x16, 32 bits/pixel, 16x16, 32 bits/pixel

当前使用的CSS及HTML代码如下：

CSS代码 #

.ico {
    size: 15px;
}

HTML代码 #

<ul class="ico">
    <li><img alt="github" src="https://domain.tld/icons/github.com.ico"><a href="https://github.com/" rel="nofollow noreferrer">Github</a></li>
    <li><img alt="Malt" src="https://domain.tld/icons/www.malt.fr.ico"><a href="https://www.malt.fr" rel="nofollow noreferrer">Malt</a></li>
    <li><img alt="Upwork" src="https://domain.tld/icons/www.upwork.com.ico"><a href="https://www.upwork.com/" rel="nofollow noreferrer">Upwork</a></li>
    <li><img alt="LinkedIn" src="https://domain.tld/icons/www.linkedin.com.ico"><a href="https://www.linkedin.com//" target="_blank">LinkedIn</a></li>
    <li><img alt="Stackoverflow" src="https://domain.tld/icons/stackoverflow.com.ico"><a href="https://stackexchange.com/" target="_blank">Stackoverflow</a></li>
    <li><img alt="Mastodon" src="https://domain.tld/icons/joinmastodon.org.ico"><a href="https://mamot.fr/" rel="me nofollow noreferrer">Mastodon</a></li>
</ul>

解决方案 #

你之前的CSS存在两个问题：一是size不是有效的CSS属性，二是选择器只作用在<ul>上，没有定位到实际的<img>元素。另外，部分ICO文件包含多个尺寸（比如32x32），浏览器可能会默认加载较大的尺寸，导致显示不一致。

可以通过以下CSS解决：

/* 直接定位到ul下的所有li中的img */
ul.ico li img {
    /* 设置统一的宽高，这里用实际最小尺寸16px */
    width: 16px;
    height: 16px;
    /* 确保图标按比例显示，不会拉伸变形 */
    object-fit: contain;
    /* 可选：添加垂直对齐，和文字对齐更美观 */
    vertical-align: middle;
}

如果希望图标尺寸更小（比如你之前尝试的15px），直接修改width和height的值即可，object-fit: contain会保证图标保持原比例，不会变形。

内容的提问来源于stack exchange，提问作者Gilles Quénot