說一下一個工作中碰到的業(yè)務需求：
熱門評論前三需要在評論旁邊加個標，注明第一名第二名第三名，一開始是一個標一個img標簽，三個src指向了三張不同的圖片，現在上了CDN，把三張圖片和為一張，要用雪碧圖（background-position）的處理方式來做。
很直接的思路是不給img設置src，依然通過背景圖的方式去做，但是我這么做的時候發(fā)現使用這種方式渲染出的元素會有白邊。
當然，也可以直接放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中怎么平移
看個簡單的例子
<style>
div{
font-size: 0;
}
div>img{
object-fit: cover;
width: 188px;
height: 52px;
}
</style>
<body>
<div style="margin: 150px auto;width: 376px">
<img src="./index.png" style="object-position: left top"/>
<br/>
<img src="./index.png" />
<br/>
<img src="./index.png" style="object-position: left bottom"/>
<br/>
</div>
<img src="./index.png"/>
</body>
圖片也放這了
這里我們把圖片縮小為原來的一半后拆成三行進行顯示，為了表明我不是糊弄你們的，我在三個圖片上加了個黑色邊框。
這種情況是符合我們上述的業(yè)務場景的，因為圖標的大小往往需要和雪碧圖的長寬需要有一定的關系，這個是美工該做的。
這種關系往往是成線性關系，打個比方，我這里排名1、2、3，規(guī)定好了頁面上顯示的是1616，那么給我的雪碧圖必須是以16
48為基準的，如有變化，也必然是長寬成倍增加或減少，我這次做需求拿到的圖就是32
96的。
說這么多比例是為什么呢，是為了解釋object-fit: cover;這個的由來，MDN上的解釋被替換的內容在保持其寬高比的同時填充元素的整個內容框。如果對象的寬高比與內容框不相匹配，該對象將被剪裁以適應內容框。關鍵詞：保持寬高比。
那區(qū)別于contain呢，contain會在img標簽中完整顯示圖片，而cover只是覆蓋，img標簽覆蓋圖片，覆蓋的標準是啥呢？按照img標簽寬高的最長的一條去匹配圖片對應的邊。
上例子
<style>
img {
object-fit: cover;
width: 200px;
height: 100px;
border: 1px solid black;
}
</style>
<body>
<img src="./index.png" style="object-position: left top"/>
</body>
這里
width>height，圖片會把長縮放到width的長度，同時等比縮放寬
<style>
img {
object-fit: cover;
width: 100px;
height: 200px;
border: 1px solid black;
}
</style>
<body>
<img src="./index.png" style="object-position: left top"/>
</body>
這里
width<height，圖片會把寬縮放到height的長度，同時等比縮放長。
object-position：這里就不多做解釋了，代碼中的left top right bottom分別表示圖片偏移到某條邊為止,但是實際上還有個center屬性，這些屬性相互結合就可以形成一個九宮格。當然，px和百分比作為像素也是可以的。
最后，就用九宮格拼個圖結束吧
<style>
img{
font-size: 0;
}
div>img{
object-fit: none;
width: 125px;
height: 103px;
border: 1px solid black;
}
</style>
<body>
<div style="margin: 150px auto;width: 400px">
<img src="./index.png" style="object-position: left top"/>
<img src="./index.png" style="object-position: center top"/>
<img src="./index.png" style="object-position: right top"/>
<br/>
<img src="./index.png" style="object-position: left center" />
<img src="./index.png" style="object-position: center center"/>
<img src="./index.png" style="object-position: right center"/>
<br/>
<img src="./index.png" style="object-position: left bottom"/>
<img src="./index.png" style="object-position: center bottom"/>
<img src="./index.png" style="object-position: right bottom"/>
</div>
</body>
這里為啥又是object-fit: none;呢，因為我們切割圖的時候就已經按照比例了，大家可以設置成cover看下什么效果，或許對cover有更好的理解。
那么如何又切割，又縮放呢？
我也不太清楚，也許可以transform:scale
