Как правильно масштабировать спрайты в CSS - PullRequest
Новая
       46

Как правильно масштабировать спрайты в CSS

0 голосов
/ 19 октября 2019

Я пытаюсь автоматически масштабировать текст с буквами, представленными спрайтами , чтобы он поместился в div:

Example

Каждая буква имеет определенные координаты в изображении спрайта алфавита CSS.

Если текст слишком длинный, я динамически применяю transform: scale(0.x);, чтобы подогнать его по размеру.

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

Вот базовый воспроизводимый пример масштаба 0,5, который не работает должным образом:

Basic example

<html>
<body>
    <div style="width: 114px; height: 63px;"><div class="letter letter-a"></div><div class="letter letter-d"></div></div>
    <div style="width: 114px; height: 63px;"><div class="letter letter-a larger"></div><div class="letter letter-d larger"></div></div>
    <style type="text/css">
        .letter { border: 1px solid red; height: 100%; margin: auto 0; background-image: url(https://ibb.co/gJpYXkW); background-size: auto 153%; }
        .letter-a { width: 59px; display: inline-block; background-position: left -12px top -18px; }
        .letter-d { width: 51px; display: inline-block; background-position: left -187px top -18px; }
        .larger { clear: both; margin-top: 30px; transform: scale(0.5); }
    </style>
</body>
</html>


.letter { border: 1px solid red; height: 100%; margin: auto 0; background-image: url('https://i.ibb.co/6FxQpjt/sprite.png'); background-size: auto 153%; }
.letter-a { width: 59px; display: inline-block; background-position: left -12px top -18px; }
.letter-d { width: 51px; display: inline-block; background-position: left -187px top -18px; }
.larger { clear: both; margin-top: 30px; transform: scale(0.5); }
<html>
<body>
    <div style="width: 114px; height: 63px;"><div class="letter letter-a"></div><div class="letter letter-d"></div></div>
    <div style="width: 114px; height: 63px;"><div class="letter letter-a larger"></div><div class="letter letter-d larger"></div></div>
</body>
</html>
...