Можно ли изменять размеры изображений, которые мы получаем от спрайта. Я имею в виду вот так:
background: url(../images/sprite.png) no-repeat -1px -1170px;
display: block;
height: 14px;
width: 14px;
Можно ли изменить ширину и высоту спрайта? Например, если у меня есть значок карандаша в спрайте с разрешением 40x40, но я хочу отобразить этот значок карандаша, как 20x20 пикселей
Спасибо, заранее.
Вы можете использовать свойство background-size в css3:
background-size: 50% 50%;
Другим решением является использование свойства zoom: .5; для css3.
Изменение background-size заставит вас каждый раз проверять содержимое width и height контейнера.
При использовании zoom у вас не будет поддержки firefox
...
Другим вариантом является использование:
transform: scale(.5); /* 50% smaller */
transform: scale(1.5); /* 50% bigger */
Задняя сторона этого элемента после масштабирования все равно сохранит свое первоначальное пространство.
После поиска в этом ответе я нашел решение здесь: fooobar.com/questions/46162/...
Он работал так, что он был отзывчивым, хотя он не использует фоновое изображение для этого... он работает во всех браузерах, а не в варианте фона, где он не будет работать в старых браузерах - этот способ делает. *
* ну, по крайней мере, когда я его протестировал.
Здесь вы можете увидеть демо: http://tobyj.net/responsive-sprites/
Я использовал это в ситуации, когда у меня есть значок слева и текст справа, и он масштабирует мою иконку, чтобы поддерживать отзывчивость.
background-size - это то, что вы ищете.
#example1 {
background-size: 40px 40px;
}
#example2 {
background-size: 20px 20px;
}
Использование преобразования изменит только масштаб изображения без размера. Чтобы изменить размер изображения спрайта с 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" >