как динамично да оразмерявате мулти-css спрайт изображение

Имам няколко въпроса, които може да доведат до решение:

1. Защо използвате множество изображения за нещо, което може лесно да се постигне с помощта на малко css3 и едно изображение (кръстосаното нещо)? Едно изображение може по-лесно да бъде преоразмерено като процент от ширината на контейнера или дори чрез css3 свойството за размер на фона.

2. Ако трябва да използвате изображения за всяко нещо, бихте ли помислили никога да не използвате спрайтове? Неговата поддръжка е чисто раздразнение, особено ако някой трябва да отнеме проекта от вас по-късно.

3. Може би комбинация от двете?

Ако изберете втората опция, предлагам да използвате data uris. Ето кратко обяснение: http://css-tricks.com/data-uris/ Това спестява една http заявка повече от спрайтовете, по-лесно се поддържа и разликата в общия размер е доста незначителна по мое честно мнение, а поддръжката е страхотна - IE8+ и всички разумни браузъри са там. Настройката е достатъчно лесна, особено ако използвате всемогъщия интерпретатор на sass, но има някои изящни помощни средства (команден ред, графичен интерфейс или дори уеб базирани), за да трансформирате вашите изображения в base64. Може дори да поддържа IE7 с малко усилия!

Редактиране 3.11.12

Можете също така да добавите http://css3pie.com/ към опциите за проверка - това ви позволява да правите триковете на css3 толкова обичаме и обожаваме Internet Explorer. Малко е непредсказуем за моя вкус, но за малък подвиг като този определено може да свърши работа.

Освен това коментирах нуждите ви от поддръжка на браузъра по-долу. 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 спрайтовете

Изчислете ляво средно и дясно

Можете също да изберете да генерирате 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 });
        });
    });
});​

Размерът обаче не преоразмерява спрайтовете, за да отговарят на новите размери на кутията, така че изглежда безсмислена задача.

Fiddler: 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 */
}

и променете произхода на трансформацията с: transform-origin