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

У меня есть несколько вопросов, которые могут привести к решению:

1. Почему вы используете несколько изображений для чего-то, чего можно легко добиться, используя немного css3 и одно изображение (крест-штучка)? Размер одного изображения можно легко изменить в процентах от ширины контейнера или даже с помощью свойства background-size 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/динамически-генерировать-статические-css-файлы-использование-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 });
        });
    });
});​

Однако размер не изменяет размер спрайтов, чтобы они соответствовали новым размерам блоков, поэтому кажется бессмысленной задачей.

Скрипач: 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 */
}

и измените источник преобразования с помощью: