Question

我不能用更好的方式表达标题。抱歉！

查看上面的链接，然后继续阅读

我想使ascii艺术动态化，我的意思是说它应该像调整浏览器窗口大小时一样自动调整大小。就像图像一样，当您调整浏览器的大小时，它们也会自动调整大小。我希望它能以这种方式工作，您能帮我吗？

我附上了下面的代码，运行它。

Tldr;我希望ascii艺术的行为就像是一幅图像，并且应该根据浏览器窗口调整大小。

100,000 x 100,000

html, body {
  background-color: #000000; !important

}

body {
  color: #FFFFFF; !important
  margin: auto;
  text-align: center;
  padding: 5px;

}

.container {
    width:100%;
  border=0;
}

Answer 1

在您的情况下，这应该可以解决问题（也许需要更改字体大小）

font {
  font-size: 1.2vmin
}

vmin单位使用vw（视图宽度）和vh（视图高度）中较小的一个，因此图像应始终留在窗口中。

Answer 2

对于响应式ASCII艺术，您可以通过两种方式实现：

更新：由于无法轻松调整代码段窗口的大小，因此添加了Codepen链接。

选项1-使字体大小流畅，以便它动态调整大小：

这是使用本article中介绍的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>

Answer 3

我认为最好的解决方案是为该内容设置固定宽度。

Answer 4

尝试此代码

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;

}

调整浏览器窗口大小时如何自动调整容器（带有元素）的大小？

4 个答案: