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

У цій статті, http://css-tricks.com/css-sprites/ , мова йде про те, як я можу вирізати менший образ із 1 більшого зображення. Скажіть, будь ласка, чи можливо це / як я можу вирізати менший розмір зображення, а потім масштабувати обрізаний регіон, перш ніж викласти його?

Ось приклад із цієї статті:

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/examples/CSS-Sprites/Example1After/

Тож я хотів би знати, чи можу я зробити значки поруч із пунктом 1,2,2,4 меншими?

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

background-size : 150% 150%;

Або

Ви можете використовувати комбінацію масштабування для веб-програми / тобто і трансформації: масштаб для 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;
}

Під час використання спрайтів ви обмежуєтесь розмірами зображення в спрайті. 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) обрізає з imgтегу зображення 20x20px , яке діє як масштабоване background-image.

Спробуйте це: 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>

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>

Ось що я зробив для цього. Майте на увазі, що він не працюватиме на IE8 та нижче.

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

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

Перший відсоток - це ширина цільової області спрайта, коли на нормальну ширину ділиться на загальну ширину спрайта і помножується на 100.

Другий відсоток - це висота цільової площі спрайта до масштабування, поділена на загальну висоту спрайта і помножена на 100.

Формулювання цих двох рівнянь трохи неохайне, тому дайте мені знати, чи потрібно мені, щоб я пояснив це краще.

Це, здається, працює для мене.

Якщо спрайт знаходиться в сітці, встановіть background-size100% кількість спрайтів і 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('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 пікселів, то щоб отримати 4540 пікселів на 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

Припустимо, що зсув становить 31 пікселів

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 45w 32h
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>

Старий пост, але ось що я зробив, використовуючи 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;}

СКОРОЧЕНИЙ ПІДТРИМУВАННЯ СПРАВИ
http://jsfiddle.net/zuhloobie/133esq63/2/

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

чи щось перешкоджає вам відтворювати зображення в потрібному розмірі в першу чергу?

Щоб вирішити цю проблему, я був задоволений: мені знадобився певний час:

Проблема:

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

• Ми хочемо масштабувати кожне їх використання у селекторах вмісту (: до /: після) у різних місцях за різними розмірами без повторного визначення порядок кожного спрайту виходячи з використовуваного розміру.

Таким чином, це рішення дозволяє використовувати ті самі спірити спрайту в а, <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%;
}

Використовуючи відсотки (до двох знаків після коми) у фоновому положенні, а не розмірі фону, як запропоновано іншими тут, ви можете масштабувати те саме оголошення значка до будь-якого розміру, не потребуючи його повторного декларування.

Відсоток позиції-у - це початкова висота спрайта / висота значка як% - у нашому випадку тут 80px * 100 / 3200px == кожен спрайт представлений y-положенням 2,5%.

Якщо у вас є стан наведення курсора / миші, ви можете подвоїти ширину спрайта і вказати в координаті позиція-x.

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

Я думаю, що знайшли більш просте рішення для масштабування зображень: приклад - скажімо, що є зображення з 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, сподіваюся, він працює і в старих версіях ..

Використовуйте transform: scale(...);та додайте відповідність, margin: -...pxщоб компенсувати вільний простір від масштабування. (ви можете використовувати * {outline: 1px solid}для перегляду меж елементів).

2018 рік тут. Використовуйте розмір фону з відсотком.

ЛИСТ:

Це передбачає один ряд спрайтів. Ширина аркуша повинна бути числом, яке рівномірно ділиться на 100 + шириною одного спрайта . Якщо у вас є 30 спрайтів розміром 108x108 px, то додайте до кінця зайвий пробіл, щоб зробити остаточну ширину 5508px (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>

Використовуйте transform: scale(0.8);зі значенням, яке вам потрібно замість 0,8

Встановіть ширину та висоту для обгорткового елемента спрайта. Використовуйте цей css.

{
    background-size: cover;
}

Легко ... Використовуючи дві копії одного зображення з різною шкалою на аркуші спрайта. Встановіть Коорди та розмір за логікою програми.