CSS спрайты не будут масштабироваться - PullRequest
Новая
       38

CSS спрайты не будут масштабироваться

0 голосов
/ 12 мая 2018 
<div class="my-sprite"></div>

.my-sprite {
    background-image: url("https://cdn.pbrd.co/images/HkKj0eC.png");
    height:100px;
    width:100px;
    background-position: 0 0;
    background-position:-200px 0px;
}

Я не могу заставить свои спрайты масштабироваться до меньшего размера.Я хочу, чтобы он был как половина фактического размера, который составляет 100x100px. Как я могу масштабировать его с помощью свойства background-size?Прямо сейчас он показывает только полный размер изображения 100x100px ...

Ответы [ 2 ]

0 голосов
/ 12 мая 2018

Вы можете использовать transform:scale(). 

.my-sprite {
  background-image: url("https://cdn.pbrd.co/images/HkKj0eC.png");
  height: 100px;
  width: 100px;
  background-position: -200px 0px;
  transform: scale(.3);
}
<div class="my-sprite"></div>
0 голосов
/ 12 мая 2018

Ваш спрайт изображения имеет размер 500x400, поэтому определите половину этого размера, если вы хотите уменьшить на 2 на background-size, затем отрегулируйте background-position, чтобы получить любой значок, который вы хотите: 

.my-sprite {
    background-image: url("https://cdn.pbrd.co/images/HkKj0eC.png");
    height:50px;
    width:50px;
    background-position:-350px 0px;
    background-size:250px 200px;
    
    border:1px solid;
}
<div class="my-sprite"></div>

Вы можете уменьшить больше на любое число шкалы, вам просто нужно сделать правильный расчет 

.my-sprite {
    background-image: url("https://cdn.pbrd.co/images/HkKj0eC.png");
    height:calc(100px / 5);
    width:calc(100px / 5);
    background-position:calc(3/5 * 100px) 0px;
    background-size:calc(500px / 5) calc(400px / 5);
    
    border:1px solid;
}
<div class="my-sprite"></div>

Вот общая формула с использованием переменной CSS для номера шкалы, а также для выбора значка. 

.my-sprite {
    display:inline-block;
    background-image: url("https://cdn.pbrd.co/images/HkKj0eC.png");
    height:calc(100px / var(--n,1));
    width:calc(100px / var(--n,1));
    background-position:calc(var(--i,3)/var(--n,1) * 100px) calc(var(--j,0)/var(--n,1) * 100px);
    background-size:calc(500px / var(--n,1)) calc(400px / var(--n,1));
    
    border:1px solid;
}
<div class="my-sprite"></div>
<div class="my-sprite" style="--n:2;--i:2;--j:2"></div>
<div class="my-sprite" style="--n:3;--i:4;--j:1"></div>
<div class="my-sprite" style="--n:4;--i:1"></div>
<div class="my-sprite" style="--n:5;--j:3"></div>
<div class="my-sprite" style="--n:0.5"></div>
<div class="my-sprite" style="--n:0.8"></div>
...