雪碧图 响应式

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
如果要把某张图片完全显示在容器元素内，我们可以推导出：
elW = imgW, elH = imgH
cX = sX, cY = sY
根据上面的信息，我就可以计算出具体的(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)
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容