Можно ли уменьшить див с текстом как картинку?

Question

[zeni1agent]

У меня есть div c вложенными в него еще 3 дивами

<div class="test">
<div  class="test1">Text</div>
<div  class="test2">Text</div>
<div  class="test4">Text</div>
</div>

И мне интересно
можно ли легко с помощью css сделать так что бы
при уменьшение основного дива test
Весь контент с фонами и тестом, уменьшался бы равно пропорционально.
Точно так же как если бы это была бы картинка

Comments

[Rustam Bainazarov]

Можно. Делать всё на относительных единицах (тотальный кошмар) с использованием неочевидных хаков и т. п.

[Артём Ведищев]

Попробуй через JS вычислит ширину блока и дальше методом пропорции вывести размер шрифта. И опять через JS назначить размер шрифта.
Только зачем?

Answer 1

[Александр]

Можете попробовать выставить шрифт в vw. Например:
font-size:1.5vw;
Только нам нужны будут пределы, а то до минимума так можно уменьшить. И проверьте, насколько это кроссбраузерно

Answer 2

[Cr2ed]

Делаете все на rem. При изменение размера окна пересчитываете базовое значение rem и обновляете его. rem

Comments

[zeni1agent]

Ну я пытаюсь переменить rem только вот он почему-то нечего не меняет

.test{
min-height: 141px;
width: 100%;
}
.test1{
front-size: 0.9rem;
}

[Cr2ed]

так тебе надо в зависимости от изменения ширины высоты экрана пересчитывать основание rem и вешать его на html тэг как аттрибут font-size:

и все пиксели тебе надо заменить на rem

[Cr2ed]

хотя если тебе надо менять конкретный размер вложеных частей относительно div, то лучше будет использовать em.