Спрайты для значков с адаптивным размером, например, background-size: contains;

У меня есть приложение, которое имеет много иконок. Я знаю, что использование спрайтов для этих значков - правильный путь вместо нескольких маленьких изображений. Тем не менее, мне нужно, чтобы эти значки были того же размера, что и контейнер (background-size: contain;), поэтому я был вынужден использовать несколько изображений для каждой иконки:

.icon1 {
  background-image: url('../my-site/icon1.gif');
  background-size: contain;
}

.icon2 {
  background-image: url('../my-site/icon2.gif');
  background-size: contain;
}
. . . and so on...

Однако использование спрайтов приведет к:

  1. (безbackground-size: contain;) - изображение настолько маленькое, когда т.е. кнопка большая

  2. (используяbackground-size: contain;) - весь спрайт показывается контейнеру!

Есть ли способ использовать адаптивный спрайт, который бы отображал значок (используяbackground-position) и сделать этот значок 100% ширины и высоты контейнера?

Источник

1 ответ

Решение

Для этого, к сожалению, нет волшебного решения. Вы должны будете отрегулировать размер самого фона вручную.

#home {
    width: 46px;
    height: 44px;
    background: url(https://i.imgur.com/1ijjJJU.gif) 0 0;
}

#next {
    width: 43px;
    height: 44px;
    background: url(https://i.imgur.com/1ijjJJU.gif) -91px 0;
}

#home-double {
    width: 92px;
    height: 88px;
    background: url(https://i.imgur.com/1ijjJJU.gif) 0 0;
    background-size: 268px;
}

#next-double {
    width: 86px;
    height: 88px;
    background: url(https://i.imgur.com/1ijjJJU.gif) -182px 0;
    background-size: 268px;
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

<p>Normal size</p>
<p><img id="home" src="img_trans.gif"></p>
<p><img id="next" src="img_trans.gif"></p>

<p>Double size</p>
<p><img id="home-double" src="img_trans.gif"></p>
<p><img id="next-double" src="img_trans.gif"></p>

</body>
</html>

Обратите внимание, что при изменении размера фона вы также должны изменить положение фона.

Конечно, это безумие и не имеет смысла.

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

Если вы все еще предпочитаете иконки PNG, я бы сказал, угробите спрайтов. Поддерживать их сложно даже при правильном процессе сборки. Перейдите к https и http2, тогда у вас будет абсолютно нулевая проблема с несколькими одновременными запросами.

Источник
Другие вопросы по тегам