Responsive sprite images?

First of all, this is an awesome plugin. Really saves a lot of time and trouble.

I’m wondering- is there a way to use grunt-spritesmith to force images to scale according to the width of its parent container?

Right now, it seems like all of the values that are generated are pixel values, not percentages, so they never change size. This is especially troublesome when used with Bootstrap 3’s img-responsive class, as images will get cut off on mobile (or any smaller screen).

HTML markup:

<div class="col-md-2 col-sm-6 col-xs-6">
    <a href="#">
        <div class="sprite1 img-responsive"></div>
    </a>
</div>

Generated stylus code via grunt-spritesmith:

$sprite1_x = 0px;
$sprite1_y = 0px;
$sprite1_offset_x = 0px;
$sprite1_offset_y = 0px;
$sprite1_width = 360px;
$sprite1_height = 240px;
$sprite1_total_width = 360px;
$sprite1_total_height = 1440px;
$sprite1_image = '../images/logos_sprite.png';
$sprite1 = 0px 0px 0px 0px 360px 240px 360px 1440px '../images/logos_sprite.png';

Result on smaller displays:

Any ideas on a solution? Thanks!

[emitxyz]

Hey, great job on this! This has been a lifesaver as I’m working on a project that requires over 800 images that need to be made into sprites. However these sprites all need to be scaleable, and easily repackaged and distrubuted and I’m running into some problems getting this all automated.

I believe you are incorrect regarding your second argument for abandoning this issue, changing the background-position values to percentages would work exactly the same out of the box, but instead allow for re-sizing of the element, while pixel values do not allow for this. You would still set a pixel based height and width value on the actual .icon- elements (as the ‘default’), which could then be overwritten if you wanted it half size, quarter size, etc.

I don’t believe there is any benefit in using pixel values for the background-position, except for the ability to set pixel based offsets. However, you could instead allow for percentage-based offsets in the exact same way (albeit not as human readable). Additionally I can’t really think of an actual use-case for needing custom offsets? What are those meant for?

As I understand it, to get this working on my end all that’s needed is to update the mixins in the outputted SCSS/less/etc to divide the values by the total_height and total_width, however all the units are suffixed with px. I think these values would be generally easier to handle, and result in a smaller generated scss file if the suffix was added as part of one of the mixins instead. I also can’t seem to figure out how to pass the total_height and total_width values as variables into the scss, which would speed things up significantly. Any ideas?

Thanks

[denisz1]

Hey all see a good approach here. Works well.