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

Question

В этой статье, http://css -tricks.com / css-sprites / , рассказывается о том, как можно обрезать меньшее изображение из одного большего изображения. Подскажите, пожалуйста, возможно ли это / как я могу обрезать уменьшенное изображение, а затем масштабировать обрезанную область, прежде чем выложить ее?

Вот пример из этой статьи:

A
{
  background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/3deb155981/spriteme1.png);
  background-position: -10px -56px;
}

Я хотел бы знать, как я могу масштабировать это изображение после того, как я обрезал его из spriteme1.png

Вот URL примера: http://css -tricks.com / примеры / CSS-спрайты / Example1After /

Итак, я хотел бы знать, смогу ли я сделать значки рядом с Item1,2,3,4 меньше?

Answer 1

Ну, я думаю, нашел более простое решение для масштабирования изображений: пример - допустим, есть изображение с 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;
}

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

Answer 2

Мне кажется, это работает.

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

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

background-position: -200% -100%;

Например вот лист спрайтов 4x2 спрайтов

А вот пример

div {
  margin: 3px;
  display: inline-block;
}
.sprite {
  background-image: url('https://i.stack.imgur.com/AEYNC.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>

Если спрайты имеют разные размеры, вам нужно установить background-size для каждого спрайта равным проценту, так что ширина спрайта станет 100%

Другими словами, если изображение имеет ширину 640 пикселей и спрайт внутри этого изображения имеет ширину 45 пикселей, то для получения 45 пикселей будет 640 пикселей

xScale = imageWidth / spriteWidth
xScale = 640 / 45
xScale = 14.2222222222
xPercent = xScale * 100
xPercent = 1422.22222222%

Тогда вам нужно установить смещение. Сложность смещения заключается в том, что 0% выравнивается по левому краю, а 100% - по правому.

Будучи графическим программистом, я ожидал бы, что смещение в 100% переместит фон на 100% по всему элементу, другими словами, полностью с правой стороны, но это не то, что означает 100% при использовании с backgrouhnd-position. background-position: 100%; означает выравнивание по правому краю. Итак, форумла для учета этого после масштабирования составляет

xOffsetScale = 1 + 1 / (xScale - 1)              
xOffset = offsetX * offsetScale / imageWidth

Предположим, смещение составляет 31px

xOffsetScale = 1 + 1 / (14.222222222 - 1)
xOffsetScale = 1.0756302521021115
xOffset = offsetX * xOffsetScale / imageWidth
xOffset = 31 * 1.0756302521021115 / 640
xOffset = 0.05210084033619603
xOffsetPercent = 5.210084033619603

Вот изображение 640x480 с 2 спрайтами.

1. при 31x 27y размер 45 Вт 32 ч
2. при 500x 370y размер 105w 65h

Следуя вышеприведенной математике для спрайта 1

xScale = imageWidth / spriteWidth
xScale = 640 / 45
xScale = 14.2222222222
xPercent = xScale * 100
xPercent = 1422.22222222%

xOffsetScale = 1 + 1 / (14.222222222 - 1)
xOffsetScale = 1.0756302521021115
xOffset = offsetX * xOffsetScale / imageWidth
xOffset = 31 * 1.0756302521021115 / 640
xOffset = 0.05210084033619603
xOffsetPercent = 5.210084033619603

yScale = imageHeight / spriteHEight
yScale = 480 / 32
yScale = 15
yPercent = yScale * 100
yPercent = 1500%

yOffsetScale = 1 + 1 / (15 - 1)
yOffsetScale = 1.0714285714285714
yOffset = offsetY * yOffsetScale / imageHeight
yOffset = 27 * 1.0714285714285714 / 480
yOffset = 0.06026785714285714
yOffsetPercent = 6.026785714285714

div {
  margin: 3px;
  display: inline-block;
}
.sprite {
  background-image: url('https://i.stack.imgur.com/mv9lJ.png');
}
.s1 {
  background-size:      1422.2222% 1500%;
  background-position:  5.210084033619603% 6.026785714285714%;
}
.s2 {
  background-size:      609.5238095238095% 738.4615384615385%;
  background-position:  93.45794392523367% 89.1566265060241%;
}

<div class="sprite s1" style="width: 45px; height:20px"></div>
<div class="sprite s1" style="width: 128px; height:30px"></div>
<div class="sprite s1" style="width: 64px; height:56px"></div>
<div class="sprite s1" style="width: 57px; height:60px"></div>
<div class="sprite s1" style="width: 45px; height:45px"></div>
<div class="sprite s1" style="width: 12px; height:50px"></div>
<div class="sprite s1" style="width: 50px; height:40px"></div>
<hr/>
<div class="sprite s2" style="width: 45px; height:20px"></div>
<div class="sprite s2" style="width: 128px; height:30px"></div>
<div class="sprite s2" style="width: 64px; height:56px"></div>
<div class="sprite s2" style="width: 57px; height:60px"></div>
<div class="sprite s2" style="width: 45px; height:45px"></div>
<div class="sprite s2" style="width: 12px; height:50px"></div>
<div class="sprite s2" style="width: 50px; height:40px"></div>

Answer 3

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

Answer 4

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

{
    background-size: cover;
}