Искусство ASCII искажается при уменьшении масштаба в браузере - PullRequest
1 голос
/ 17 октября 2019

Я делаю конвертер изображений в ascii art, который выводит HTML-файл, позволяющий форматировать и легко масштабировать. Проблема, однако, заключается в том, что при уменьшении масштаба в Chrome высота изображения ascii уменьшается меньше его ширины, и изображение становится искаженным (слишком широким). Я пытался играть со свойством line-height безрезультатно. В Edge и IE проблем нет - масштабирование успешно сохраняет соотношение сторон. Вот пример вывода HTML-кода конвертера с низким разрешением, но проблема усиливается при увеличении разрешения. Любая помощь будет оценена!

    <!DOCTYPE html>

    <html>

    <body style="
        COLOR:#000000;
        TEXT-ALIGN:center;
        FONT-SIZE:1px;
    ">

    <p style="
        white-space:pre;
        FONT-FAMILY:Courier New;
        FONT-SIZE:1.171875rem;
        LETTER-SPACING:0.15em;
        LINE-HEIGHT:0.400000em;
    ">

                            `MMMMMMMMMMMMMMM@BQBMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMME%SMMMMMMMMMMMMMMMM`                            <br>
                            `MMMMMMMMMMMMMMc~~~1MMMMMMMMMMMMMMMMMMMMMMMMMMM#K$@G)//IQMMMMMMMMMMMMMM`                            <br>
                            `MMMMMMMMMMMMM&amp;.`./5MMMMMMMMMMMMMMGJ?DMMMMMMB9{~~~(D+)//:A#MMMMMMMMMMMM`                            <br>
                            `MMMMMMMMMMMA)(.~~:#MMMMMMMMMMMMM%...+MMQdJ'~~~~~~~/+/'//'+KMMMMMMMMMMM`                            <br>
                            `MMMMMMMMMM3~/./+CHMMMMMMMMMMMMMM$~...:+~...~.~~~~~~/:5C:!'(HMMMMMMMMMM`                            <br>
                            `MMMMMMMMM4.7.`.~KMMMMMMMMMMMMMMH!.``........~~~~~~~~L!C547'?MMMMMMMMMM`                            <br>
                            `MMMMMMMMB``{```/"MMMMMMMMMMM"7~````.7.+........~~~~~!&amp;c25/''%MMMMMMMMM`                            <br>
                            `MMMMMMMM!``'``.(BMMMMMMMMMMM:`````~':/L./'....~//~~~~4!&amp;7//'(H@MMMMMMM`                            <br>
                            `MMMMMMQ:``````/CMMMMMMMMMMMMC`````.2``J.1~....~.~~~~~/5{////':'EMMMMMM`                            <br>
                            `MMMMMM2``````.)BMMMMMMMMMMMMD``.)``~``c.~:....~..~~~~~/////'//(!QMMMMM`                            <br>
                            `MMMMMC```````~CMMMMMMMMMMMMMQ.~$Q:```/.``/.......~~~~~/////~'')+"MMMMM`                            <br>
                            `MMMM$````````/GQMMMMMM@EQMMMM@%&amp;!{````````.....~..~~~/~~/////'(+{BMMMM`                            <br>
                            `MMMM~````'````.'#MMME?LL$M#HSC+~~`````..........~.~~~.~~///'/''):LMMMM`                            <br>
                            `MMM"````.+`````~%MMM5&amp;CC9SU&amp;3J````````````......~~..~~~~/////+7(+:BMMM`                            <br>
                            `MMM/`).'+.`````/$MMMEJCCCCCCCJ````````````........~.~~~~/////C$+++5MMM`                            <br>
                            `MMK`.c:'/```/~/!##d313CCCCCCCC`````````````.``....~~~~~~~////12I)+7#MM`                            <br>
                            `MM:````+```/I$599L&amp;&amp;CCCCCCCCCC.``````````````......~~~~~~//(//9&amp;)+:$MM`                            <br>
                            `MQ.```````.+CCCC&amp;CCCCCCCCCCCCC/``````````````....~//.~~~~//+7/+4(+:2MM`                            <br>
                            `M%.```````~7CCCC&amp;CCCCCCCCCCCCC7```````````./~2..~~...~~~~~//J?1U(+:{BM`                            <br>
                            `M!````````~1CCC33CCCCCCCC2:/~``````````.+c.{`+..~....~~~~~///2DI(){{KM`                            <br>
                            `M~````````~1CCCJJCCCCC7~` `````.`````/S~`L'/`+`.~..../~~~~/////''((:&amp;M`                            <br>
                            `#`````````.//~....{CC2    `````.``````~4`.9~`(`..~../~/~~~/////(''+:1M`                            <br>
                            `K``````````````` `(CCC'   `````.```````/3`)5~/`...///.~/~~///'')))(:{#`                            <br>
                            `&amp;``.```````````` /&amp;CCC:    `````````````{c/~S.`.......~/~~~////':)):7R`                            <br>
                            `1``7/``````````` .CJ!~     `..`.`````````J(`/``.......~~~~~/////+)):!G`                            <br>
                            `+`./)~`````````           ````````````````.````.......~~~//~///')+):7%`                            <br>
                            `'`.+!I`````````           .``````````````````.........~~//~////'')!c79`                            <br>
                            `~`./.``.```````  `'/+C~   .````````````````...`..~...~//~~~////''!cI79`                            <br>
                            `/`.:&amp;.`````````  ?.  .D.  .```````````````.````..~.~~~.~/~/////'(c2I75`                            <br>
                            `/``+./````````` ."    J7  ```.``.`````````.````..~~...~~~////'/'(??274`                            <br>
                            `/``14.``````````~S    7!  ``.````.````````..```.......~~~/~/////({I?7U`                            <br>
                            `(`...````````````$.   J. ```````````````````.``.......~~~///~/'/+???7%`                            <br>
                            `1````````````````~J. //./`````````.````````.```....'/~~~~~~///'/+{22{D`                            <br>
                            `J````````````````//?`+%&amp;/`````````.``````..````..~?9.~~~~~////'')+cc7H`                            <br>
                            `S````````````````?I+``````````````.......````~:7..(G~~~~~~//'('():{{7B`                            <br>
                            `E`````````````````````````````````.``````````~4{..{%(~~~~~////'(+:{{1M`                            <br>
                            `M.````````````````````````````````.``````````.7C.//C!~~~~////'()+:!7CM`                            <br>
                            `M+````````.```````````````````````.``````````./$.{.!&amp;~~~~////'()+:!{%M`                            <br>
                            `ML`)+`````.```````````````````````.`````````...G+'.'%/~~~//'/')++{{7EM`                            <br>
                            `MB`~`/````.`````````````.`````````.````...``...4J..+J'~~////)'++:7!IMM`                            <br>
                            `MM/~c/.```.`````````````.``````````.``.```.`...?L/.~~~~~////++)+:7!"MM`                            <br>
                            `MM4`~~?/``.````````````````````````...````.`..~+~.~~~/~////'()+:{52@MM`                            <br>
                            `MMQ.~+!.```.`````````.````````````````````.`.....~~.~/////''()+:&amp;LCMMM`                            <br>
                            `MMM?.~/)````....`````7/`:++.``````````.........~..~~~//////()):7%UAMMM`                            <br>
                            `MMM#...(````````.````+7/c`3'`````````.````.......~~~~'////()++:JJLMMMM`                            <br>
                            `MMMM?``..```````````/+!~{)3~````````.```......~.~~~~~~///'()++{73HMMMM`                            <br>
                            `MMMMQ~.`````.````````7+I~!&amp;.````````.``........~.~~~////'(+:+:7JSMMMMM`                            <br>
                            `MMMMM%..````.```````~!:.`I1c.```````..........~..~~////'')++:{7&amp;BMMMMM`                            <br>
                            `MMMMMM{.````.````````(+/~c~?+~``````~..........~~CU%?/''(++::7!DMMMMMM`                            <br>
                            `MMMMMM#~````.````````/~~`+/.`````............~~~~4S%L'')++:{{!&amp;MMMMMMM`                            <br>
                            `MMMMMMMR..`...````````````````...``..~......~~~~///7C'()7{:{72QMMMMMMM`                            <br>
                            `MMMMMMMM$...`......`````````..`......./...~~~~~////22()++:{7cBMMMMMMMM`                            <br>
                            `MMMMMMMMMU//....```````.```............~~.~~~~////'3!)++:{{!EMMMMMMMMM`                            <br>
                            `MMMMMMMMMM9/:..~.......................~~~~~/////''4+++:::!RMMMMMMMMMM`                            <br>
                            `MMMMMMMMMMM"/'..~...................~~~~~~~/////''(++++:{1@MMMMMMMMMMM`                            <br>
                            `MMMMMMMMMMMMd:+~.~................~..~~~~//////'''(+++:72BMMMMMMMMMMMM`                            <br>
                            `MMMMMMMMMMMMMBcc/........)7:'/.~~~~~~~~/'////''(()++::{LQMMMMMMMMMMMMM`                            <br>
                            `MMMMMMMMMMMMMMQ9/~~~~~.~~~/:~~//~~///''//)//'''()+7?1?KMMMMMMMMMMMMMMM`                            <br>
                            `MMMMMMMMMMMMMMMME:~///~~~~)(~~~/!~///////'/''()+:7J!4#MMMMMMMMMMMMMMMM`                            <br>
                            `MMMMMMMMMMMMMMMMMMG+~~//~~(:)c:{9(///////''()++?IICEMMMMMMMMMMMMMMMMMM`                            <br>
                            `MMMMMMMMMMMMMMMMMMMMG7/////'{(/)'/////''(++::+:73RMMMMMMMMMMMMMMMMMMMM`                            <br>
                            `MMMMMMMMMMMMMMMMMMMMMMB5+'//////'/('''(():+++I%#MMMMMMMMMMMMMMMMMMMMMM`                            <br>
                            `MMMMMMMMMMMMMMMMMMMMMMMMMB$C!(/'''2?J:))+c5d#MMMMMMMMMMMMMMMMMMMMMMMMM`                            <br>
                            `MMMMMMMMMMMMMMMMMMMMMMMMMMMMMQBHG$%%$KR#MMMMMMMMMMMMMMMMMMMMMMMMMMMMMM`                            <br>
    </p>

    </body>

    </html>
...