雪碧圖 響應式

background-size : ( Sprites width / image width) (Sprites height / image height)

我們已知的信息如下：
容器元素的尺寸：elW * elH
單張圖片的尺寸：imgW * imgH
Sprites圖片的尺寸：spritesW * spritesH
單張圖片在Sprites圖上的位置：imgPosX, imgPosY
我們假設：
點的位置為 (x, y)
容器上的(x, y)點與容器左上角的距離為 cX, cY
Sprites圖上的(x, y)點與本張圖片左上角的距離為 sX, sY
如果要把某張圖片完全顯示在容器元素內(nèi)，我們可以推導出：
elW = imgW, elH = imgH
cX = sX, cY = sY
根據(jù)上面的信息，我就可以計算出具體的(x, y)值了，下面以 x% 為例：
cX = elW * x
sX = spritesW * x - imgPosX
elW * x = spritesW * x - imgPosX
解方程后就得到計算公式了：
x = imgPosX / (spritesW - elW) = imgPosX / (spritesW - imgW)
y = imgPosY / (spritesH - elH) = imgPosY / (spritesH - imgH)
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容