我有一个由多个 css sprite 构建的图像，如以下问题所述：css image building with sprites
我将如何使用它以便我可以在顶部容器上应用一个大小来动态调整所有子容器的大小？
这是目前为止的工作小提琴：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>
【问题讨论】：
标签： css css-sprites
我有几个问题，可能会导致解决方案：
您为什么要使用多个图像来实现使用一点 css3 和单个图像（cross thingie）可以轻松实现的东西？可以更轻松地调整单个图像的大小，按容器宽度的百分比，甚至使用 css3 background-size 属性。
如果您必须为每件事情使用图像，您是否可以考虑永远不要使用精灵？它的可维护性是纯粹的烦恼，特别是如果有人后来不得不把这个项目从你手中夺走。
也许两者兼而有之？
如果你选择第二个选项，我建议使用 data uris。 这是一个简短的解释： http://css-tricks.com/data-uris/ 它比 sprite 多节省了一个 http 请求，更易于维护，而且总体大小的差异在我看来是相当微不足道的，而且支持很棒 - IE8+ 和所有理智的浏览器都在那里。 设置很容易，特别是如果您使用全能的 sass 解释器，但有一些漂亮的实用程序（命令行、gui 甚至基于 Web）可以将您的图像转换为 base64。 不费吹灰之力就可以支持IE7！
您还可以在选项中添加http://css3pie.com/ 以进行检查 - 它可以让您使用 Internet Explorer 执行我们非常喜欢和喜欢的 css3 技巧。这对我来说有点难以预测，但对于像这样的小壮举，它绝对可以做到这一点。
此外，我在下面评论了您的浏览器支持需求。 IE7 不会阻止你；）
【讨论】：
您可以将 zoom 用于 webkit/ie 和 -moz-transform:scale 用于 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 sprites 的位置
计算左中右
您也可以选择在单独的文件中生成 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 });
});
});
});
然而，size 不会调整 sprite 的大小以适应新的盒子大小，所以这似乎是一项毫无意义的任务。
【讨论】：
虽然你想做的事情可以完成，但我认为你的做法是错误的。它比它需要的复杂得多，但这个想法是合理的。
看看你的精灵，唯一不能用 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 */
}
并使用以下命令更改变换原点：transform-origin
【讨论】：