Я не могу сформулировать название лучше. Простите за это!
Смотрите ссылку выше и продолжайте читать
Я хочу сделать это 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>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>В вашем случае это должно помочь (возможно, размер шрифта нужно изменить)
font {
font-size: 1.2vmin
}
Модуль vmin использует меньший из vw (ширина просмотра) и vh (высота просмотра), поэтому изображение всегда должно оставаться в окне в вашем случае
Я думаю, что лучшее решение здесь - установить фиксированную ширину для этого контента.
Попробуйте этот код
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;
}
Похожие вопросы
Новые вопросы
html
HTML (язык разметки гипертекста) - это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы, касающиеся HTML, должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто используется вместе с [CSS] и [javascript].