img标签内图片的雪碧图形式展示

说一下一个工作中碰到的业务需求：
热门评论前三需要在评论旁边加个标，注明第一名第二名第三名，一开始是一个标一个img标签，三个src指向了三张不同的图片，现在上了CDN，把三张图片和为一张，要用雪碧图（background-position）的处理方式来做。

很直接的思路是不给img设置src，依然通过背景图的方式去做，但是我这么做的时候发现使用这种方式渲染出的元素会有白边。

当然，也可以直接放div上去，设置背景balablabala的，但是空的div写在公司的代码里好意思吗？我觉着挺不好意思的

下面说解决方案：
object-fit + object-position
先上文档：
object-fit https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
object-position https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-position

咋用呢：object-fit控制图片在img中怎么铺，object-position控制图片在img中怎么平移
看个简单的例子

图片也放这了

index.png

image.png

这里我们把图片缩小为原来的一半后拆成三行进行显示，为了表明我不是糊弄你们的，我在三个图片上加了个黑色边框。

这种情况是符合我们上述的业务场景的，因为图标的大小往往需要和雪碧图的长宽需要有一定的关系，这个是美工该做的。
这种关系往往是成线性关系，打个比方，我这里排名1、2、3，规定好了页面上显示的是1616，那么给我的雪碧图必须是以1648为基准的，如有变化，也必然是长宽成倍增加或减少，我这次做需求拿到的图就是3296的。

说这么多比例是为什么呢，是为了解释object-fit: cover;这个的由来，MDN上的解释被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。关键词：保持宽高比。
那区别于contain呢，contain会在img标签中完整显示图片，而cover只是覆盖，img标签覆盖图片，覆盖的标准是啥呢？按照img标签宽高的最长的一条去匹配图片对应的边。

上例子

image.png

这里width>height，图片会把长缩放到width的长度，同时等比缩放宽

image.png

这里width，图片会把宽缩放到height的长度，同时等比缩放长。

object-position：这里就不多做解释了，代码中的left top right bottom分别表示图片偏移到某条边为止,但是实际上还有个center属性，这些属性相互结合就可以形成一个九宫格。当然，px和百分比作为像素也是可以的。

最后，就用九宫格拼个图结束吧

这里为啥又是object-fit: none;呢，因为我们切割图的时候就已经按照比例了，大家可以设置成cover看下什么效果，或许对cover有更好的理解。

那么如何又切割，又缩放呢？
我也不太清楚，也许可以transform:scale