CSS-спрайты с динамическим размером

Я решил создать лист спрайтов для всего моего сайта (+-30 изображений), чтобы я мог загрузить 1 изображение и просто ссылаться на позиции, что сокращает время загрузки изображения и вызовы сервера.

Мой вопрос: можно ли сослаться на изображение на листе спрайтов, а затем изменить размер этого изображения на 100% от его родительского контейнера?

Итак, например:

#SomeDiv
{
    background: url("/Content/Images/SpriteSheet.png") -125px 0 no-repeat;
    width:100px;
}

Ширина моего div составляет 100 пикселей, но спрайт, на который я хочу ссылаться, составляет 20 пикселей (например) - как я могу растянуть извлеченный спрайт, чтобы увеличить его до 100 пикселей?

С уважением, Байрон Кобб.


css sprite
person Bob    schedule 22.09.2010    source источник
comment
Вы не можете, если только вы не используете background-size, но поддержка этого браузера на данный момент довольно плохая.   -  person Yi Jiang    schedule 22.09.2010
comment
Это, конечно, вещь CSS3, но не будет ли изображение выглядеть ужасно в любом случае? Если только не сплошной цвет..   -  person Kyle    schedule 22.09.2010

Ответы (1)


arrow_upward
10
arrow_downward

Что ж, если вы действительно хотите получить ответ, то почему бы и нет. См.: http://jsfiddle.net/3dsgn/3/.

В основном мы работаем с CSS3, поэтому поддержка IE (кроме 9) отсутствует. Вам также придется использовать версию с расширением -moz- для Firefox 3.6 и ниже. Сама техника также несколько хлопотна. На самом деле вам нужно пойти и посчитать цифры самостоятельно — проценты, естественно, не сработают.

#sprite-large {

    /* All of these numbers are 2x their normal, 
       though tweaked slightly so that they will look okay */
    width: 36px;
    height: 36px;
    background: url('url/to/your/image.png') -38px -112px;

    -moz-background-size: 448px 368px;
    background-size: 448px 368px;
}
person Yi Jiang    schedule 22.09.2010
comment
И если вы расширите компас... это будет автоматически при компиляции :) - person Intellix; 05.10.2012
comment
Работал ОТЛИЧНО. Спасибо, мне это было очень нужно, и я не мог понять это сам. Я просто хотел бы порекомендовать также добавить это: -webkit-background-size: 448px 368px;, так как я вижу, что рендеринг изображения лучше всего работает с браузерами, поддерживающими WebKit. - person Santiago Baigorria; 12.04.2013
comment
@Santz Я не думаю, что это будет необходимо, поскольку и Chrome, и Safari поддерживают свойство без префикса, начиная с версии 3.0. Версия без префикса идентична и вообще не влияет на рендеринг изображения. - person Yi Jiang; 12.04.2013
comment
Отлично, тогда просто комментарий! - person Santiago Baigorria; 12.04.2013