I have an ASCII text art image in large size on an html page, but i am not not able to reduce the size of it on an html page.
It look like this:
__________¶¶_¶¶__¶¶_¶¶_
_________¶¶_¶¶_¶¶_¶¶_¶¶¶
_____¶¶¶¶¶____________¶¶¶¶¶¶¶
___¶¶¶¶¶_______________¶¶¶¶¶¶¶
__¶¶¶¶¶__________________¶¶¶¶¶
__¶¶¶¶____________________¶¶¶
___¶¶______________________¶¶¶
___¶________________________¶¶¶¶
__¶¶_____¶¶¶______¶¶________¶¶¶¶¶¶¶
__¶_____¶¶¶¶_____¶¶¶¶¶______¶¶¶¶¶¶_¶
__¶____¶¶¶¶¶____¶¶¶¶¶¶¶¶____¶¶¶¶¶¶__¶
__¶¶__¶¶¶¶¶______¶¶¶¶¶¶¶___¶¶¶¶¶¶¶___¶
___¶__¶¶¶__________¶¶¶¶___¶¶¶¶¶¶¶¶¶___¶
___¶¶____________________¶¶¶¶¶¶¶¶¶¶___¶¶¶
___¶¶¶_____¶¶¶¶¶¶_______¶¶¶¶¶¶¶¶¶¶¶___¶¶¶¶
___¶¶¶¶¶___¶¶¶¶¶¶_____¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶
___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶
___¶¶¶¶¶¶¶¶__¶¶¶___¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶
____¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
____¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶¶¶
____¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶
__¶¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶
__¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶
___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶
___________________¶¶¶¶¶¶¶¶¶¶¶
___________________¶¶¶¶¶¶¶¶¶¶
It's Text, so it's influenced by the font, or more directly the font-size
See example CodePen here, or the example I included below by hitting the "Run Code Snippet" button. Anything you can do to font
you can do to your ascii design.
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>