html - 在精灵中

我有一个div（假设30px宽度和30px高度）并且我正在为所有图像使用精灵图像，现在精灵中有一个图像background-position : -12px -1467px（仅举例）其宽度和高度为70px，我想将此图像作为背景应用于给定的div。

问题是如何缩放该图像以适合div大小。

如果我根据分辨率增加或减少div大小，这不应该破坏。

我的精灵的宽度和高度可以更改（稍后可以在精灵中添加更多图像）。

这个问题可能重复，因为很少有人建议，但我无法正确理解这些问题。我为此创建了fiddle。

在小提琴中，div显示原始精灵，在第一个div中，我只想显示第一个图像但是当我调整div的大小时，第一个图像应该用div调整大小（就像我我正在使用单个图像而不是精灵。

这样做的一种方法是让第一个div等于第一张图片然后调整大小，使用类似transform:scale(.5)的内容，但我不想使用它。