Reputation: 13

How to automatically resize a container (with elements) when browser window is resized?

I coudn't phrase the title in a better way. Sorry for that!

See the link above and continue reading

I want to make that ascii art dynamic, I mean to say that it should automatically resize like when I resize the browser window. Like images do, when you resize the browser they resize themselves. I want it to work that way, can you help me with this?

I have attached the code below, run it.

Tldr; I want the ascii art to behave like it is an image and it should resize according to the browser window.

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>

Upvotes: 1

Answers (4)

Kalnode

Reputation: 11306

For responsive ASCII art, you could do it in two ways:

UPDATE: Added Codepen links because you can't easily resize codesnippet windows.

Option 1 - Make the font size fluid, so it dynamically resizes:

This is using a calc method presented in this article.

Codepen, or see below:

.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>

Method 2 - Change the font size manually using media queries

Use CSS media queries to set break points and just manually change the font-size as you desire. Definitely not as smooth as method 1, however someone may find a reason to do it this way.

Codepen or see below:

.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>

Upvotes: 1

xttrust

Reputation: 595

Try this code

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;

}

Upvotes: 0