零基础求助：如何裁剪14px×14px图片空白并填满同尺寸容器？

你当前使用的图片本身尺寸就是14×14px，但内部有效内容周围带了大量空白，直接用object-fit没效果是因为图片和容器尺寸一致，这个属性是用来适配尺寸不一致的图和容器的。给你两个实用方案：

方案一：用CSS容器模拟裁剪+缩放 #

把图片套进一个14×14px的容器里，通过放大图片+裁剪空白的方式让有效内容填满空间：

<div style="width:14px; height:14px; overflow:hidden;">
  <img src="https://cdn.gifo.wisestamp.com/s/calendar2/000000/64/0/transparent.png" 
       style="width: 20px; height:20px; object-fit: cover; object-position: center;"/>
</div>

• 逻辑：先把图片放大（比如设为20px），让内部有效内容同步放大，再用object-fit: cover裁掉周围空白，object-position: center保证内容居中，外层容器锁定14×14的最终显示尺寸。

方案二：直接处理图片（更彻底） #

如果能修改图片源文件，用图片编辑工具（比如PS、免费在线图片编辑器）操作：

• 打开图片后，选中空白区域反选得到有效内容，裁剪掉空白部分
• 把裁剪后的内容重新缩放成14×14px，导出透明PNG
• 替换原来的图片地址，直接用你最初的代码就能填满空间

内容的提问来源于stack exchange，提问作者daackrm4