Как масштабировать изображение в CSS-спрайте

Ответ 1

Вы можете использовать фоновый размер, так как он поддерживается большинством браузеров (но не все http://caniuse.com/#search=background-size)

background-size : 150% 150%;

Или

Вы можете использовать комбо масштабирования для webkit/ie и transform: scale для Firefox (-moz-) и Opera (-o-) для кросс-браузера настольные и мобильные устройства

[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;
}

Ответ 2

Когда вы используете спрайты, вы ограничены размерами изображения в спрайте. Свойство background-size CSS, упомянутое Стивеном, пока не поддерживается широко и может вызвать проблемы с браузерами, такими как IE8 и ниже, и с учетом их доли на рынке, это не является жизнеспособным вариантом.

Еще один способ решить проблему - использовать два элемента и масштабировать спрайт, используя его с тегом img, например:

<div class="sprite-image"
     style="width:20px; height:20px; overflow:hidden; position:relative">
    <!-- set width/height proportionally, to scale the sprite image -->
    <img src="sprite.png" alt="icon"
         width="20" height="80"
         style="position:absolute; top: -20px; left: 0;" />
</div>

Таким образом, внешний элемент (div.sprite-image) обрезает 20x20px изображение из тега img, который действует как масштабированный background-image.

Ответ 3

Попробуйте это: Stretchy Sprites - кросс-браузер, адаптивное изменение размера/растяжение изображений спрайтов CSS

Этот метод масштабирует спрайты "быстро", чтобы ширина/высота изменялась в соответствии с размером окна вашего браузера. Он не использует background-size поскольку поддержка этого в старых браузерах отсутствует.

CSS

.stretchy {display:block; float:left; position:relative; overflow:hidden; max-width:160px;}
.stretchy .spacer {width: 100%; height: auto;}
.stretchy .sprite {position:absolute; top:0; left:0; max-width:none; max-height:100%;}
.stretchy .sprite.s2 {left:-100%;}
.stretchy .sprite.s3 {left:-200%;}

HTML

<a class="stretchy" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
<a class="stretchy s2" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
<a class="stretchy s3" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>

Ответ 4

transform: scale(); заставит оригинальный элемент сохранить его размер.

Я нашел лучший вариант, это использовать vw. Это работает как шарм:

https://jsfiddle.net/tomekmularczyk/6ebv9Lxw/1/

#div1,
#div2,
#div3 {
  background:url('//www.google.pl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png') no-repeat;
  background-size: 50vw;   
  border: 1px solid black;
  margin-bottom: 40px;
}

#div1 {
  background-position: 0 0;
  width: 12.5vw;
  height: 13vw;
}
#div2 {
  background-position: -13vw -4vw;
  width: 17.5vw;
  height: 9vw;
  transform: scale(1.8);
}
#div3 {
  background-position: -30.5vw 0;
  width: 19.5vw;
  height: 17vw;
}

<div id="div1">
  </div>
  <div id="div2">
  </div>
  <div id="div3">
  </div>

Ответ 5

Вот что я сделал для этого. Имейте в виду, что он не будет работать на IE8 и ниже.

#element {
  width:100%;
  height:50px;
  background:url(/path/to/image.png);
  background-position:140.112201963534% 973.333333333333%;
}

Ширина фонового изображения будет уменьшаться, когда родительский элемент #element масштабируется. Вы можете сделать то же самое с его высотой, если конвертировать height в процент. Единственный сложный бит - вычисление процентов для background-position.

Первый процент - это ширина целевой области спрайта, когда нормальная ширина делится на общую ширину спрайта и умножается на 100.

Второй процент - это высота целевой области спрайта до масштабирования, деленная на общую высоту спрайта и умноженную на 100.

Формулировка этих двух уравнений немного неряшлива, поэтому дайте мне знать, если вам нужно, чтобы я объяснил это лучше.

Ответ 6

Старый пост, но здесь то, что я сделал, используя background-size:cover; (шляпный совет @Ceylan Pamir)...

ПРИМЕР ИСПОЛЬЗОВАНИЯ
Горизонтальный круговой флиппер (наведите курсор на изображение на передней стороне, переверните назад на другое изображение).

ПРИМЕР СПРАЙТ
480px x 240px

Пример окончательного размера
Одно изображение @120px x 120px

ОБЩИЙ КОД
.front {width:120px; height:120px; background:url(http://www.example.com/images/image_240x240.png); background-size:cover; background-repeat:no-repeat; background-position:0px 0px;}

.back {width:120px; height:120px; background:url(http://www.example.com/images/image_240x240.png); background-size:cover; background-repeat:no-repeat; background-position:-120px 0px;}

СОКРАЩЕННАЯ ДЕЛО FIDDLE
http://jsfiddle.net/zuhloobie/133esq63/2/

Ответ 7

попробуйте использовать размер фона: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

есть ли что-то, что мешает вам отображать изображения с нужным вам размером в первую очередь?

Ответ 8

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

Проблема:

• Спрайт из SVG значков - скажем, 80px x 3200px

• Мы хотим масштабировать каждое использование их в селекторах контента (: before/: after) в разных местах по разным размерам без переопределения координат каждого спрайта на основе используемого размера.

Таким образом, это решение позволяет использовать одни и те же спрайтовые координаты в <button> как <menuitem>, все еще масштабируя его.

[data-command]::before {
    content: '';
    position: absolute;
    background-image: url("images/sprite.svgz");
    background-repeat: no-repeat;
    background-size: cover;
}

button[data-command]::before {
  width: 32px;
  height: 32px;
}

menuitem[data-command]::before {
  width: 24px;
  height: 24px;
}

[data-command="cancel"]::before {
  background-position: 0% 35%;
}

[data-command="logoff"]::before {
  background-position: 0% 37.5%;
}

Используя процентное соотношение (до 2 знаков после запятой) в фоновой позиции, а не в размере фона, как предлагается другими здесь, вы можете масштабировать одно и то же объявление значка до любого размера без необходимости его повторного использования.

Процент позиции-y - это высота оригинала спрайта/высоты значка как% - в нашем случае здесь 80px * 100/3200px == каждый спрайт представлен y-позицией 2,5%.

Если у вас есть состояния наведения/наведения мыши, вы можете удвоить ширину спрайта и указать координату position-x.

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

Ответ 9

Ну, я думаю, нашел более простое решение для масштабирования изображений: например, скажем, есть изображение с 3 спрайтами одинакового размера, которые вы хотели бы использовать, используйте CSS для масштабирования изображения

background-size : 300% 100%;

а затем укажите пользовательскую высоту и ширину, которые должны быть применены к вашему элементу html, например:

 width :45%;
 height:100px;

Пример кода будет выглядеть примерно так:

.customclass {
    background: url("/sample/whatever.png") 0 0 no-repeat ;
    background-size : 300% 100%;
    width :45%;
    height:100px;
}

im довольно новый для css, а стиль - не моя лучшая область, это может быть неправильным способом сделать это.. но это сработало для меня в Firefox/Chrome/Explorer 10, надеюсь, что он работает и в более старых версиях..

Ответ 10

Используйте transform: scale(...); и добавьте соответствующее margin: -...px чтобы компенсировать свободное пространство от масштабирования. (вы можете использовать * {outline: 1px solid} чтобы увидеть границы элементов).

Ответ 11

2018 здесь. Используйте background-size с процентом.

ПРОСТЫНЬ:

Это предполагает один ряд спрайтов. Ширина вашего листа должна быть числом, которое делится на 100 + ширина одного спрайта. Если у вас 30 спрайтов размером 108x108 пикселей, добавьте дополнительное свободное место в конец, чтобы окончательная ширина составила 5508 пикселей (50 * 108 + 108).

CSS:

.icon{
    height: 30px;  /* Set this to anything. It will scale. */
    width: 30px; /* Match height. This assumes square sprites. */
    background:url(<mysheeturl>);
    background-size: 5100% 100%; /*  5100% because 51 sprites. */
}

/* Each image increases by 2% because we used 50+1 sprites. 
   If we had used 20+1 sprites then % increase would be 5%. */

.first_image{
    background-position: 0% 0;
}

.ninth_image{
    background-position: 16% 0; /* (9-1) x 2 = 16 */
}

HTML:

<div class ="icon first_image"></div>
<div class ="icon ninth_image"></div>

Ответ 12

Кажется, это работает для меня.

Если спрайты находятся в сетке, задайте для background-size значение 100% от числа спрайтов и 100% от количества спрайтов. Затем используйте background-position -<x*100>% -<y*100>% где x и y - спрайт на основе нуля

Другими словами, если вы хотите, чтобы 3-й спрайт слева и 2-й ряд, что 2 выше и 1 вниз так

background-position: -200% -100%;

Например здесь спрайт лист 4х2 спрайты

И вот пример

div {
  margin: 3px;
  display: inline-block;
}
.sprite {
  background-image: url('/img/58591081be040ab8f5ef439069534d18.png');
  background-size: 400% 200%;  /* 4x2 sprites so 400% 200% */
}
.s0x0 { background-position:    -0%   -0%; }
.s1x0 { background-position:  -100%   -0%; }
.s2x0 { background-position:  -200%   -0%; }
.s3x0 { background-position:  -300%   -0%; }
.s0x1 { background-position:    -0%  -100%; }
.s1x1 { background-position:  -100%  -100%; }
.s2x1 { background-position:  -200%  -100%; }
.s3x1 { background-position:  -300%  -100%; }

<div class="sprite s3x1" style="width: 45px; height:20px"></div>
<div class="sprite s3x1" style="width: 128px; height:30px"></div>
<div class="sprite s3x1" style="width: 64px; height:56px"></div>
<div class="sprite s2x1" style="width: 57px; height:60px"></div>
<div class="sprite s3x0" style="width: 45px; height:45px"></div>
<div class="sprite s0x1" style="width: 12px; height:100px"></div>

<br/>
<div class="sprite s0x0" style="width: 45px; height:20px"></div>
<div class="sprite s1x0" style="width: 128px; height:45px"></div>
<div class="sprite s2x0" style="width: 64px; height:56px"></div>
<div class="sprite s3x0" style="width: 57px; height:60px"></div>
<br/>
<div class="sprite s0x1" style="width: 45px; height:45px"></div>
<div class="sprite s1x1" style="width: 12px; height:50px"></div>
<div class="sprite s2x1" style="width: 12px; height:50px"></div>
<div class="sprite s3x1" style="width: 12px; height:50px"></div>

Ответ 13

Используйте transform: scale(0.8); с нужным вам значением вместо 0,8

Ответ 14

Установите ширину и высоту в обертку элемента спрайта. Используйте этот css.

{
    background-size: cover;
}

Ответ 15

Простота... Использование двух копий одного и того же изображения с разной шкалой на листе спрайта. Установите Coords и размер в логике приложения.