Масштабирование изображения спрайта

278
11 октября 2018, 07:20

Суть: есть спрайт и на нём не в масштабе пикча. Подскажите, пожалуйста, есть ли способ масштабировать итоговое изображение спрайта (уменьшить/вписать размером в букву) через css, не прибегая к фотошопу?

.telephone 
        border: 1px solid red 
        &::before 
          display: inline-block 
          background: url(../img/css_sprites.png) no-repeat 
          background-position: -340px -240px 
          height: 50px 
          width: 50px 
          border: 1px solid red 
          content: '' 
          margin-right: 8px
<div class="telephone">8 (123) 456 78 90</div>

Answer 1

Предположим, ваш спрайт имеет размеры 400*320 px и размеры иконок в нем 40*40 px. Положение вашей иконки - 6-я слева во 2-м ряду сверху. Соответственно, при масштабе 1:1 для показа ее нужно задать background-position:X Y, где X = -200 (200 = 40px * (6-1)), Y = - 40 (40 = 40px * (2-1)). При этом неявно подразумевается, что background-size вашего спрайта равен его реальному размеру, т.е., 400*320.

Вам надо задать размер иконки, равный размеру шрифта. Поехали:

  1. Для начала задайте высоту элемента, который эту иконку содержит, равной высоте шрифта, например, 16 пикселей, и пропорциональную ширину (для квадратной иконки - тоже 16 пикселей) .
  2. Рассчитайте background-size. Если вы поставите его как 100%, в элемент вместо одной иконки влезут ВСЕ, поэтому это значение нужно увеличить во столько раз, во сколько одна иконка меньше всего спрайта. Если в процентах, то для ширины это значение будет 100%*(400/40), высоту оставить auto для сохранения пропорций.
  3. Аналогично рассчитайте background-position. В нашем примере это будет X = -80 (80 = 16px * (6-1)), Y = - 16 (16 = 16px * (2-1)).

Но проще использовать псевдоэлемент, которому задать стилями трансформации.

READ ALSO
BEM и базовые теги
CSS

BEM и базовые теги

Есть теги которые часто используются и имеют один стиль (например <p>, <h1>, <li>)

 242
Прокрутить блок fixsed
javascript

Прокрутить блок fixsed

На странице появляется блок div, и чтобы он появлялся в любом участке длинной страницы, ему придали позицию fixedВысота этого блока может быть...

 270
Проверить на js существование Cookie [закрыт]
javascript

Проверить на js существование Cookie [закрыт]

Появилась задача проверить существование COOKIE на стороне клиента, если существует, предоставить доступ{Вопрос закрыт}

 257
Разместить react-sidebar по скролу
javascript

Разместить react-sidebar по скролу

Компонент react-sidebar позволяет сделать сайтбар размером с высоту экранаМне нужно на сайте с прокруткой, чтоб сайтбар выходил не сверху, а смещенный...

 246