本节的内容没有在七夕主题效果中实现，这是一个额外的知识点，留给大家思考的一个问题：雪碧图如何做自适应缩放？

本课程采用了CSS3的动画关键帧实现了精灵动画，所有的精灵图都是通过合成的雪碧图获取的，这样带来了一个根本问题：通过background-position获取的图片，正常情况下是无法缩放的，因为图片的位置是固定了，如果通过这种方式实现了精灵图那么在不同的分辨率下其实都是固定的尺寸，这样效果就明显有点呆板了

针对这样的问题，当然也有折中的办法，比如我们不加载精灵图，而是通过background-image加载一张一张的图片，这样是可以的，但是需要预加载的处理，否则图片大了会闪屏了。一般精灵图都是通过position处理比较合理，我们有没有办法把这个图片给缩放一下达到自适应的目的呢？这里我给大家一个参考的方案，CSS3有一个scale可以这样处理。

这里先参考下我右边代码的实现效果，人物是不是感觉缩放了？

缩放原理：

通过CSS3的scale处理直接可以让元素缩放

需要处理的问题：

• 需要计算出元素的缩放比，可以根据屏幕的宽度与UI的设计比例缩放

带来的问题：

• 通过scale缩放后浏览器认为这个元素尺寸是没变化的，所以要得到缩放后的尺寸算法应该是 实际尺寸 * 缩放比
• scale是默认按照中间基点缩放，所以需要计算出实际布局与缩放后布局的一个内部缩放距离，就是一个类似padding一样的数据

具体的算法我右边已经给出来了

通过UI的设计与屏幕算一个缩放比

$(document).width() / 1440

通过这个缩放比，设置下元素的缩放大小，然后通过实际的人物尺寸与缩放比算出人物内部缩放的数据boyInsideLeft与boyInsideTop

最终，要定为人物在中间位置的算法：

人物在马路中间 = 马路中间路的垂直距离 - 人物原始的垂直距离 - 人物缩放后的垂直距离

这样算法我们可以弄一个公共方法出来，通过这样的方式，我们可以很愉快的改造雪碧图实现自适应布局了~~~

PS: 我之后又仔细研究下雪碧图的自适应问题，想到一种比较完美的方案，具体可以参见我的博客：原创：CSS3技术-雪碧图自适应缩放