我已经将图像从多个CSS精灵建成，在这个问题描述： 用CSS精灵形象建设
我将如何使用，这样我可以在顶部容器，将动态调整大小所有的孩子上应用的大小？
这里是fidlle工作至今： http://jsfiddle.net/hWhUb/3/
这里是目前的HTML结构：
<div class="icon">
<div class="brigade brigade-purple-left"> </div>
<div class="brigade brigade-purple-middle"> </div>
<div class="brigade brigade-purple-right"> </div>
<div class="icon-type icon-hero"> </div>
</div>
我有几个问题，可能导致一个解决方案：
你为什么要使用的东西多张图片，可以使用位的CSS3和单个图像（交叉的thingie），可以轻松实现？ 单个图像可以更容易地被调整大小，当容器宽度的百分比，或甚至使用CSS3背景-size属性。
如果必须使用图像的每一件事情，你能可能永远不会考虑使用精灵，永远不会消失？ 它的可维护性是纯粹的烦恼，特别是如果有人向你拿项目走以后。
也许两者兼而有之？
如果您选择了第二个选项，我建议使用数据URI。 下面是一个简短的解释： http://css-tricks.com/data-uris/它节省比精灵多了一个HTTP请求，更容易维护，并在总体规模上的差异是我的真实想法，而微不足道，和支持是巨大的 - IE8 +和所有健全的浏览器我们的存在。 设置是很容易的，特别是如果你使用万能的萨斯解释，但也有一些漂亮的utils的在那里（命令行，图形界面甚至基于Web）将图像转换为BASE64。 它甚至可以支持IE7有一点点的努力！
您还可以添加http://css3pie.com/的选项，以检查出-它可以让你做的CSS3技巧，我们这么爱和与Internet Explorer崇拜。 这是一个有点不可预知我的口味，但对于这样一个小的成绩绝对可以做的伎俩。
此外，我评论下方的浏览器支持的需求。 IE7是不是发生了什么事情阻止你;）
您可以使用变焦功能的WebKit / ie和-moz-变换的组合：Firefox的规模
[class^="icon-"]{
display: inline-block;
background: url('../img/icons/icons.png') no-repeat;
width: 64px;
height: 51px;
overflow: hidden;
zoom:0.5;
-moz-transform:scale(0.5);
-moz-transform-origin: 0 0;
}
.icon-huge{
zoom:1;
-moz-transform:scale(1);
-moz-transform-origin: 0 0;
}
.icon-big{
zoom:0.60;
-moz-transform:scale(0.60);
-moz-transform-origin: 0 0;
}
.icon-small{
zoom:0.29;
-moz-transform:scale(0.29);
-moz-transform-origin: 0 0;
}
一，实现这将是使用内联CSS和JavaScript中或PHP /你用什么动态生成的属性值的方式。
假设你知道顶部容器的宽度和CSS精灵的位置
计算左中右
您也可以选择生成一个单独的文件中的CSS代码
http://aquagraphite.com/2011/11/dynamically-generate-static-css-files-using-php/
使用jQuery的一点，我可以做的元素调整到任何你想要的（ resizeTo ）：
$(document).ready(function () {
$('#resize').click(function (e) {
e.preventDefault();
var resizeTo = 100,
resizeRatio = Number(resizeTo) / Number($(".icon").width());
$(".icon").css('width', resizeTo);
$(".child").each(function () {
var childWidth = Number($(this).width()),
childHeight = Number($(this).height()),
newChildWidth = childWidth * resizeRatio,
newChildHeight = childHeight * resizeRatio;
$(this).css({ 'width': newChildWidth, 'height': newChildHeight });
});
});
});
但是，大小不调整精灵以适应新箱尺寸等等似乎是一个毫无意义的任务。
小提琴手： http://jsfiddle.net/hWhUb/4/
虽然你想做的事，可以完成什么，我觉得你的做法是错误的。 它的方式复杂得多，它需要的，但这个想法是合理的。
看着你的精灵，不能用CSS改变的仅仅是实际的图标（艺术品）。 圆角和背景色 - 这是一个不同的故事。
CSS
.icon-cross {
background:purple url('cross.jpg') no-repeat 40px 12px;
border-radius:5px;
border:1px solid gray
}
@media only screen and (max-width:768px) {
.icon-cross {
background-size: 800px 1200px;
background-position; ??px ??px
}
}
@media only screen and (max-width:400px) {
.icon-cross {
background-size: 500px 900px;
background-position; ??px ??px
}
}
HTML
<div class="icon-cross"></div>
您可以使用CSS3 2D转换：
.icon {
transform: scale(2);
-ms-transform: scale(2); /* IE 9 */
-webkit-transform: scale(2); /* Safari and Chrome */
-o-transform: scale(2); /* Opera */
-moz-transform: scale(2); /* Firefox */
}
并更改转换原点用：变换原点
