Изменение размера изображений из спрайта

Можно ли изменять размеры изображений, которые мы получаем от спрайта. Я имею в виду вот так:

background: url(../images/sprite.png) no-repeat -1px -1170px;
display: block;
height: 14px;
width: 14px;

Можно ли изменить ширину и высоту спрайта? Например, если у меня есть значок карандаша в спрайте с разрешением 40x40, но я хочу отобразить этот значок карандаша, как 20x20 пикселей

Спасибо, заранее.

Ответы

Ответ 1

Вы можете использовать свойство background-size в css3:

background-size: 50% 50%;

Ответ 2

Другим решением является использование свойства zoom: .5; для css3.

Ответ 3

Изменение background-size заставит вас каждый раз проверять содержимое width и height контейнера.

При использовании zoom у вас не будет поддержки firefox

...

Другим вариантом является использование:

transform: scale(.5); /* 50% smaller */
transform: scale(1.5); /* 50% bigger */

Задняя сторона этого элемента после масштабирования все равно сохранит свое первоначальное пространство.

Ответ 4

После поиска в этом ответе я нашел решение здесь: fooobar.com/questions/46162/...

Он работал так, что он был отзывчивым, хотя он не использует фоновое изображение для этого... он работает во всех браузерах, а не в варианте фона, где он не будет работать в старых браузерах - этот способ делает. *

* ну, по крайней мере, когда я его протестировал.

Здесь вы можете увидеть демо: http://tobyj.net/responsive-sprites/

Я использовал это в ситуации, когда у меня есть значок слева и текст справа, и он масштабирует мою иконку, чтобы поддерживать отзывчивость.

Ответ 5

background-size - это то, что вы ищете.

#example1 {
    background-size: 40px 40px;
}
#example2 {
    background-size: 20px 20px;
}

Ответ 6

Использование преобразования изменит только масштаб изображения без размера. Чтобы изменить размер изображения спрайта с 40 пикселей на 40 пикселей до 20 пикселей на 20 пикселей, вам необходимо изменить размер спрайт-изображения на 20 пикселей на 20 пикселей, а затем настроить размер фона, чтобы он соответствовал спрайту с изображениями в этой области. Также вам нужно отрегулировать фоновое положение, чтобы отобразить правильную часть спрайта.

#home {
    width: 46px;
    height: 44px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) 0 0;
}

#next {
    width: 43px;
    height: 44px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) -91px 0;
}


#resizedHome {
    width: 20px;
    height: 20px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) 0 0;
    background-size: 306%;
}

#resizedNext {
    width: 20px;
    height: 20px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) -102px 0;
    background-size: 306%;
}

<h5>
Original Sprite Image
</h5>
<img id="home" ><br><br>
<img id="next" >
<br><br>
<h5>
Resized Sprite Image
</h5>
<img id="resizedHome" ><br><br>
<img id="resizedNext" >