how to dynamically size multi-css sprite image

Question

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>

Devon Ville · Answer 1 · 2012-11-02T22:39:58.847

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

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.
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.
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;)

EladR has hit the nail on the head in my opinion. Use data URIs for the graphics (even better than a sprite, as no extra HTTP requests are required; already downloaded as part of the CSS). Use background-size to stretch the image appropriately. Also I just looked at your sprite file - you could do 90% of that with CSS3 alone (background color and rounded corners). So yeh.. what EladR said. — Chris Bell, Oct 31 '12 at 20:42
i guess i should have put the browser requirements. I need it to work in ie7+ — LordZardeck, Nov 01 '12 at 15:44
It can also work in IE7, with a little effort. From my research, there is a thing called mhtml, which enables both IE7 and IE8 to use something similar to Data URI. From my experiments, though, it worked just fine even without. Weird, but meh...It's worth a shot anyway. There are plenty of online tools to transform images, and if you're up to it use compass or even a command line tool. — Devon Ville, Nov 02 '12 at 22:35
Sprites aren't that much maintainability. I just generate them using grunt. — im_benton, Mar 19 '13 at 18:23

score 2 · Answer 2 · answered Apr 18 '13 at 10:56

You can use a combo of zoom for webkit/ie and -moz-transform:scale for 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;
}

score 1 · Answer 3 · answered Nov 01 '12 at 07:10

1

One of the ways to achieve it will be to use inline CSS and to dynamically generate attribute values in JavaScript or PHP/What you use.

Assuming you know the width of the top container and the position of the css sprites

Calculate the left middle and right

You can also opt to generate the CSS code in a separate file

http://aquagraphite.com/2011/11/dynamically-generate-static-css-files-using-php/

answered Nov 01 '12 at 07:10

Prem Kumar

11
1

the problem with using php is what if the browser is resized? then all those calculations would have to be retrieved from the server again – LordZardeck Nov 01 '12 at 15:41
What you are asking for is the use of CSS Sprites in a responsive layout. It is not advisable but can be achieved. You should make calculations on % than pixels in PHP then it should be fine.. [link]http://chiefalchemist.com/responsive-css-sprites-proof-of-concept-v0-1-0/ – Prem Kumar Nov 01 '12 at 18:02

score 0 · Answer 4 · answered Oct 25 '12 at 10:02

Using a bit of jQuery I can make the elements resize to whatever you want (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 });
        });
    });
});

However, size doesn't resize the sprites to fit the new box sizes so seems like a pointless task.

Fiddler: http://jsfiddle.net/hWhUb/4/

actually, i was hoping to do it all in just css. but if we take jquery into account, how would I resize the sprites? — LordZardeck, Oct 26 '12 at 06:54

score 0 · Answer 5 · answered Oct 29 '12 at 02:47

Though what you want to do can be accomplished, I think your approach is wrong. It's way more complicated than it needs to be, but the idea is sound.

Looking at your sprite, the only thing that can't be changed with CSS is the actual icons (the artwork). The rounded corners and background colors -- that's a different story.

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>

the reason i have 3 color boxes is that they can be 3 separate colors — LordZardeck, Oct 31 '12 at 05:43

Raz · Answer 6 · 2012-10-29T15:24:36.030

0

You can use css3 2d transforms:

.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 */
}

and change the transform origin with: transform-origin

edited Oct 29 '12 at 15:24

answered Oct 29 '12 at 15:18

Raz

8,981
4
19
18

how to dynamically size multi-css sprite image

6 Answers6

Edit 3.11.12

Linked