Как уменьшить размер изображения ASCII text art

Question

У меня есть изображение в формате ASCII в большом размере на странице html, но я не могу уменьшить его размер на странице html.

Это выглядит следующим образом:

__________¶¶_¶¶__¶¶_¶¶_ _________¶¶_¶¶_¶¶_¶¶_¶¶¶ _____¶¶¶¶¶____________¶¶¶¶¶¶¶ ___¶¶¶¶¶_______________¶¶¶¶¶¶¶ __¶¶¶¶¶__________________¶¶¶¶¶ __¶¶¶¶____________________¶¶¶ ___¶¶______________________¶¶¶ ___¶________________________¶¶¶¶ __¶¶_____¶¶¶______¶¶________¶¶¶¶¶¶¶ __¶_____¶¶¶¶_____¶¶¶¶¶______¶¶¶¶¶¶_¶ __¶____¶¶¶¶¶____¶¶¶¶¶¶¶¶____¶¶¶¶¶¶__¶ __¶¶__¶¶¶¶¶______¶¶¶¶¶¶¶___¶¶¶¶¶¶¶___¶ ___¶__¶¶¶__________¶¶¶¶___¶¶¶¶¶¶¶¶¶___¶ ___¶¶____________________¶¶¶¶¶¶¶¶¶¶___¶¶¶ ___¶¶¶_____¶¶¶¶¶¶_______¶¶¶¶¶¶¶¶¶¶¶___¶¶¶¶ ___¶¶¶¶¶___¶¶¶¶¶¶_____¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶ ___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶ ___¶¶¶¶¶¶¶¶__¶¶¶___¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶ ____¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ ____¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶¶¶ ____¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶ __¶¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶ __¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ ___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶ ___________________¶¶¶¶¶¶¶¶¶¶¶ ___________________¶¶¶¶¶¶¶¶¶¶

Answer 1

Это текст, так что это зависит от шрифта, или более прямого font-size

См примера CodePen here или пример я включил ниже, попав в «Выполнить код фрагмента». Все, что вы можете сделать до font, вы можете сделать с вашим дизайном ascii.

pre {display: inline-block} 
 
pre#normal {font-size: 100%} 
 
pre#smaller {font-size: 50%} 
 
pre#smallest {font-size: 20%}

<pre id="normal"> 
 
__________¶¶_¶¶__¶¶_¶¶_ 
 
_________¶¶_¶¶_¶¶_¶¶_¶¶¶ 
 
_____¶¶¶¶¶____________¶¶¶¶¶¶¶ 
 
___¶¶¶¶¶_______________¶¶¶¶¶¶¶ 
 
__¶¶¶¶¶__________________¶¶¶¶¶ 
 
__¶¶¶¶____________________¶¶¶ 
 
___¶¶______________________¶¶¶ 
 
___¶________________________¶¶¶¶ 
 
__¶¶_____¶¶¶______¶¶________¶¶¶¶¶¶¶ 
 
__¶_____¶¶¶¶_____¶¶¶¶¶______¶¶¶¶¶¶_¶ 
 
__¶____¶¶¶¶¶____¶¶¶¶¶¶¶¶____¶¶¶¶¶¶__¶ 
 
__¶¶__¶¶¶¶¶______¶¶¶¶¶¶¶___¶¶¶¶¶¶¶___¶ 
 
___¶__¶¶¶__________¶¶¶¶___¶¶¶¶¶¶¶¶¶___¶ 
 
___¶¶____________________¶¶¶¶¶¶¶¶¶¶___¶¶¶ 
 
___¶¶¶_____¶¶¶¶¶¶_______¶¶¶¶¶¶¶¶¶¶¶___¶¶¶¶ 
 
___¶¶¶¶¶___¶¶¶¶¶¶_____¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶ 
 
___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶ 
 
___¶¶¶¶¶¶¶¶__¶¶¶___¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶ 
 
____¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ 
 
____¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶¶¶ 
 
____¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶ 
 
__¶¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶ 
 
__¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ 
 
___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶ 
 
___________________¶¶¶¶¶¶¶¶¶¶¶ 
 
___________________¶¶¶¶¶¶¶¶¶¶ 
 
</pre> 
 
<pre id="smaller"> 
 
__________¶¶_¶¶__¶¶_¶¶_ 
 
_________¶¶_¶¶_¶¶_¶¶_¶¶¶ 
 
_____¶¶¶¶¶____________¶¶¶¶¶¶¶ 
 
___¶¶¶¶¶_______________¶¶¶¶¶¶¶ 
 
__¶¶¶¶¶__________________¶¶¶¶¶ 
 
__¶¶¶¶____________________¶¶¶ 
 
___¶¶______________________¶¶¶ 
 
___¶________________________¶¶¶¶ 
 
__¶¶_____¶¶¶______¶¶________¶¶¶¶¶¶¶ 
 
__¶_____¶¶¶¶_____¶¶¶¶¶______¶¶¶¶¶¶_¶ 
 
__¶____¶¶¶¶¶____¶¶¶¶¶¶¶¶____¶¶¶¶¶¶__¶ 
 
__¶¶__¶¶¶¶¶______¶¶¶¶¶¶¶___¶¶¶¶¶¶¶___¶ 
 
___¶__¶¶¶__________¶¶¶¶___¶¶¶¶¶¶¶¶¶___¶ 
 
___¶¶____________________¶¶¶¶¶¶¶¶¶¶___¶¶¶ 
 
___¶¶¶_____¶¶¶¶¶¶_______¶¶¶¶¶¶¶¶¶¶¶___¶¶¶¶ 
 
___¶¶¶¶¶___¶¶¶¶¶¶_____¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶ 
 
___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶ 
 
___¶¶¶¶¶¶¶¶__¶¶¶___¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶ 
 
____¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ 
 
____¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶¶¶ 
 
____¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶ 
 
__¶¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶ 
 
__¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ 
 
___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶ 
 
___________________¶¶¶¶¶¶¶¶¶¶¶ 
 
___________________¶¶¶¶¶¶¶¶¶¶ 
 
</pre> 
 
<pre id="smallest"> 
 
__________¶¶_¶¶__¶¶_¶¶_ 
 
_________¶¶_¶¶_¶¶_¶¶_¶¶¶ 
 
_____¶¶¶¶¶____________¶¶¶¶¶¶¶ 
 
___¶¶¶¶¶_______________¶¶¶¶¶¶¶ 
 
__¶¶¶¶¶__________________¶¶¶¶¶ 
 
__¶¶¶¶____________________¶¶¶ 
 
___¶¶______________________¶¶¶ 
 
___¶________________________¶¶¶¶ 
 
__¶¶_____¶¶¶______¶¶________¶¶¶¶¶¶¶ 
 
__¶_____¶¶¶¶_____¶¶¶¶¶______¶¶¶¶¶¶_¶ 
 
__¶____¶¶¶¶¶____¶¶¶¶¶¶¶¶____¶¶¶¶¶¶__¶ 
 
__¶¶__¶¶¶¶¶______¶¶¶¶¶¶¶___¶¶¶¶¶¶¶___¶ 
 
___¶__¶¶¶__________¶¶¶¶___¶¶¶¶¶¶¶¶¶___¶ 
 
___¶¶____________________¶¶¶¶¶¶¶¶¶¶___¶¶¶ 
 
___¶¶¶_____¶¶¶¶¶¶_______¶¶¶¶¶¶¶¶¶¶¶___¶¶¶¶ 
 
___¶¶¶¶¶___¶¶¶¶¶¶_____¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶ 
 
___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶ 
 
___¶¶¶¶¶¶¶¶__¶¶¶___¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶ 
 
____¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ 
 
____¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶¶¶ 
 
____¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶ 
 
__¶¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶ 
 
__¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ 
 
___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶ 
 
___________________¶¶¶¶¶¶¶¶¶¶¶ 
 
___________________¶¶¶¶¶¶¶¶¶¶ 
 
</pre>