Я не могу сформулировать название лучше. Простите за это!

Портфолио № 2 - Авизини

Смотрите ссылку выше и продолжайте читать

Я хочу сделать это ascii art динамичным, я имею в виду, что он должен автоматически изменять размер, как при изменении размера окна браузера. Как и изображения, когда вы изменяете размер браузера, они сами изменяют размер. Я хочу, чтобы это работало таким образом, вы можете помочь мне с этим?

Я приложил код ниже, запустите его.

Tldr ; Я хочу, чтобы ascii art вел себя так, как будто это изображение, и его размер должен изменяться в соответствии с окном браузера.

html, body {
  background-color: #000000; !important

}

body {
  color: #FFFFFF; !important
  margin: auto;
  text-align: center;
  padding: 5px;

}

.container {
    width:100%;
  border=0;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Required meta tags -->

  <meta charset="utf-8">
  <link rel="canonical" href="https://avizini.me" >

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
  <title>Avizini</title>
  <meta name="description" content="This portfolio was made by Avizini for his freeCodeCamp project.">
  <meta name="author" content="Avizini">
 
  <link rel="stylesheet" type="text/css" href="https://avizini.me/files/style.css">

</head>
<!-- This uses Beauter Framework -->

<body>
  
  <!-- container-->
  <div class="container">
    <font color="WHITE">
<pre>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMNmhyo+/:-..``````..-:/+oyhmNMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMmyo:.`                          `.:oymMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMNdo:.      ``..--:://++oooooo+/:-.         .:odNMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMmy/`     -+oosssssssssssssssssssssssso/-          `/ymMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMms:`         `:ossssssssssssssssssssssssssso/-.-/`      `:smMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMh/`        .--::/+ssssssssssssssssssssssssssssssss+`         `/hMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMNy-`          `-+ssssssssssssssssssssssssssssssssssssso:`         `-yNMMMMMMMMMMMMMMM
MMMMMMMMMMMMMNs-              `+ssssssssssssssssssssssssssssssssssssssso:           -sNMMMMMMMMMMMMM
MMMMMMMMMMMMy-               :ossssssssssssssssssssssssssssssssssssssssss/            -yMMMMMMMMMMMM
MMMMMMMMMMm/`              .+sssssssssssssssssssssssssssssssssssssssssssss:            `/mMMMMMMMMMM
MMMMMMMMMy.              `/ssssssssssssssssssssssssssssssssssssssssssssssss              .yMMMMMMMMM
MMMMMMMN/                --/sssssssssssssssssssssssssssssssssssssssssssssss`               +NMMMMMMM
MMMMMMm:                  -ssssssssssssssssssssssssssssssssssssssssssssssss                 :mMMMMMM
MMMMMd-                   osssss+soooooooooosssssssssssssoooooooss+sssssss/                  -dMMMMM
MMMMm.                    /sssss+sssssssssssssssssssssssssssssssssoossssss.                   .mMMMM
MMMN-                     `ossss+sss+++++++++++osssso++++++++++osss+sssss/                     -mMMM
MMM/                       .ssss+ss-:+++++++++/.osso./+++++++++:-ss+sssss`                      /MMM
MMy                         :sso/// sssssssssss.-//--sssssssssso`///+sss/                        yMM
Mm.                         `ss+sss ossssssssss.+ss/.ssssssssss+`sss+sss`                        .mM
Mo                           +s+sss/-:::::::::::ssss:::::::::::-+ssss+s/                          oM
N.                           -oosssssssssssssssssssssssssssssssssssss+s.                          .N
h                            `+ssssssssssssssssssssssssssssssssssssss+-                            h
+                             :ssssssssssssssssssssssssssssssssssssss.                             +
:                              +ssssssssssssssssssssssssssssssssssss-                              :
-                               +ssssssssssssssssssssssssssssssssss-                               -
.                                /ssssssssssssssssssssssssssssssso.                                .
-                                 .ossssssssssssssssssssssssssss/`                                 -
:                                   :ossssssssssssssssssssssss+.                                   :
+                                .:`  -+ssssssssssssssssssso/.  `:`                                +
h                                oso:`  `-/+osssssssssso+:.   `:os+                                h
N.                            `.:sssss/`    ``..----.``     `:ossss-`                             .N
Mo                        `-/+osssssssss/.                `:osssssssoo+:-`                        oM
Mm.                       .sssssssssssssss+.             -ossssssssssssss.                       .mM
MMy                       .sssssssssssssssss+-         -ossssssssssssssss.                       yMM
MMM/                      .sssssssssssssssssss+-`    -ossssssssssssssssss.                      /MMM
MMMN-                     .ssssssssssssssssssssso:`-+ssssssssssssssssssss.                     -NMMM
MMMMm.                    .sssssssssssssssssssssssossssssssssssssssssssss.                    -mMMMM
MMMMMd-                   .ssssssssssssssssssssssssssssssssssssssssssssss.                   -dMMMMM
MMMMMMm:                  .ssssssssssssssssssssssssssssssssssssssssssssss.                  :mMMMMMM
MMMMMMMN+                 .ssssssssssssssssssssssssssssssssssssssssssssss.                 +NMMMMMMM
MMMMMMMMMy.               .ssssssssssssssssssssssssssssssssssssssssssssss.               .yMMMMMMMMM
MMMMMMMMMMm/`             .ssssssssssssssssssssssssssssssssssssssssssssss.             `/mMMMMMMMMMM
MMMMMMMMMMMMy-            .ssssssssssssssssssssssssssssssssssssssssssssss.            -yMMMMMMMMMMMM
MMMMMMMMMMMMMNy-          .ssssssssssssssssssssssssssssssssssssssssssssss.          -yNMMMMMMMMMMMMM
MMMMMMMMMMMMMMMNy-`       .oooooooooooooooooooooooooooooooooooooooooooooo.       `-yNMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMh/`      ``````````````````````````````````````````````      `/hMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMms:`                                                    `:smMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMmy/`                                              `/ymMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMNdo:.                                      .:odNMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMNmyo:.`                          `.:oymNMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMNmhyo+/:-..``````..-:/+oyhmNMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
</pre></font>
    
    
</div>
  <script src="https://avizini.me/files/js/main.js"></script>

</body>
</html>
1
Avizini 21 Авг 2018 в 17:59

4 ответа

Лучший ответ

Для отзывчивого искусства ASCII вы можете сделать это двумя способами:

ОБНОВЛЕНИЕ : добавлены ссылки Codepen, поскольку вы не можете легко изменить размер окна codenippet.

Вариант 1. Сделайте размер шрифта плавным, чтобы он динамически изменял размеры.

Для этого используется метод calc, представленный в этой статье.

Codepen или см. ниже:

.ascii-art {
    font-family: monospace;
    white-space: pre;
    font-size: calc(10px + 10 * ((100vw - 200px) / 800));
    /* or try font-size: 1.2vmin as per Locke Lamora's answer */
}
<pre class="ascii-art">
     ******       ******
   **********   **********
 ************* *************
*****************************
*****************************
*****************************
 ***************************
   ***********************
     *******************
       ***************
         ***********
           *******
             ***
              *
</pre>

Способ 2. Изменение размера шрифта вручную с помощью медиа-запросов

Используйте медиазапросы CSS для установки точек останова и просто вручную изменяйте размер шрифта по своему усмотрению. Определенно не так гладко, как метод 1, однако кто-то может найти причину сделать это таким образом.

Codepen или см. ниже:

.ascii-art {
    font-family: monospace;
    white-space: pre;
    font-size: 1em;
}


@media only screen and (min-width: 1000px) {
    .ascii-art {
      font-size: 1.4em;
    }
}

@media only screen and (max-width: 680px) {
    .ascii-art {
      font-size: 1em;
    }
}

@media only screen and (max-width: 340px) {
    .ascii-art {
      font-size: 0.8em;
    }
}

@media only screen and (max-width: 200px) {
    .ascii-art {
      font-size: 0.6em;
    }
}
<pre class="ascii-art">
     ******       ******
   **********   **********
 ************* *************
*****************************
*****************************
*****************************
 ***************************
   ***********************
     *******************
       ***************
         ***********
           *******
             ***
              *
</pre>
1
MarsAndBack 21 Авг 2018 в 15:37

В вашем случае это должно помочь (возможно, размер шрифта нужно изменить)

font {
  font-size: 1.2vmin
}

Модуль vmin использует меньший из vw (ширина просмотра) и vh (высота просмотра), поэтому изображение всегда должно оставаться в окне в вашем случае

1
Locke Lamora 21 Авг 2018 в 15:18

Я думаю, что лучшее решение здесь - установить фиксированную ширину для этого контента.

0
Boris Civcic 21 Авг 2018 в 15:13

Попробуйте этот код

html, body {
background-color: #000000; !important

}

body {
  color: #FFFFFF; !important
  margin: auto;
  text-align: center;
  padding: 5px;
  height:100%;

}

.container {
    width:100%;
    height:100%;
    border:0px;

}
0
xttrust 21 Авг 2018 в 15:21
51951523