如何动态地调整多css精灵图像 [英] how to dynamically size multi-css sprite image

问题描述

我有一个由多个css sprites构建的图片，如此问题所述： css image building与sprite

我如何使用，以便我可以应用一个尺寸在顶部容器，将动态重新调整所有的孩子？

这里是到目前为止的工作fidlle： http：/ /jsfiddle.net/hWhUb/3/

这里是目前的html结构：

 < div class =icon> 
< div class =brigade brigade-purple-left>& nbsp;< / div> 
< div class =brigade brigade-purple-middle>& nbsp;< / div> 
< div class =brigade brigade-purple-right>& nbsp;< / div> 
< div class =icon-type icon-hero>& nbsp;< / div> 
< / div> 
  

解决方案

I有几个问题，这可能会导致一个解决方案：

1. 为什么你使用多个图像的东西，使用一点css3和一个单一的图像（十字架东西）？




2. 如果必须使用图片作为容器宽度的百分比，则可以更容易地调整单个图片的大小。每一件事，你可以考虑从不使用精灵，永远？它的可维护性是纯粹的烦恼，特别是如果有人不得不把项目从你以后。




也许是两者的组合？


>如果选择第二个选项，我建议使用数据uris。
以下简短说明：
http://css-tricks.com/data -uris /
它保存了一个http请求比精灵，更容易维护，整体大小的差异是相当微不足道的我的诚实意见，和支持是伟大的 - IE8 +和所有合理的浏览器我们在那里。
设置是很容易，特别是如果你使用全强大的sass解释器，但有一些奇妙的实用程序（命令行，gui甚至基于web）将您的图像转换为base64。
它甚至可以支持IE7一点点！




编辑3.11.12





还可以添加 http://css3pie.com/ 到选项来检查 - 它允许您执行css3技巧我们这样爱和崇拜与互联网探险家。这是一个有点不可预测的我的味道，但对于一个小的壮举像这样它肯定可以做的伎俩。





此外，以下我们对您的浏览器支持需求发表了评论。 IE7不是会阻止你的;）




I have an image built from multiple css sprites, as described in this question: css image building with sprites

How would I use that so that I could apply a size on the top container that would dynamically re-size all the children?

here is the working fidlle so far: http://jsfiddle.net/hWhUb/3/

here is the current html structure:

<div class="icon">
    <div class="brigade brigade-purple-left">&nbsp;</div>
    <div class="brigade brigade-purple-middle">&nbsp;</div>
    <div class="brigade brigade-purple-right">&nbsp;</div>
    <div class="icon-type icon-hero">&nbsp;</div>
</div>​

解决方案

I have a few questions, that might lead to a solution:

1. Why are you using multiple images for something that can be easily achieved using a bit of css3 and a single image (the cross thingie)? A single image can more easily be resized, as a percentage of the container width, or even using css3 background-size property.

2. If you must use images for each thing, could you possibly consider never using sprites, ever? Its maintainability is pure annoyance, especially if someone has to take the project away from you later on.

3. Perhaps a combination of both?

If you choose the second option, I suggest using data uris. Here's a short explaination: http://css-tricks.com/data-uris/ It saves one more http request than sprites, easier to maintain, and the difference in overall size is rather insignificant in my honest opinion, and support is great - IE8+ and all sane browsers our there. Setting up is easy enough, especially if you use the all-mighty sass interpreter, but there are some nifty utils out there (command-line, gui or even web-based) to transform your images into base64. It can even support IE7 with a little effort!

Edit 3.11.12

You can also add http://css3pie.com/ to the options to check out - it lets you do the css3 tricks we so love and adore with internet explorer. It's a bit unpredictable to my taste, but for a small feat like this it can definitely do the trick.

Further, I commented on your browser-support needs below. IE7 is not what's going to stop you;)

这篇关于如何动态地调整多css精灵图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！