Как уменьшить масштаб блока в зависимости от размеров родителя?

Question

[raving]

у меня есть такая верстка https://codepen.io/DobrykovM/pen/OPJpdRX
Как сделать чтобы блок с id scaleble не был адаптивным, но масштабировался на свободное пространство?
то есть сейчас этот блок больше родителя, а нужно чтобы он полностью влез в родителя путем уменьшения масштабирования, при этом чтобы соседние блоки dinamicSize и dinamicSize-2 корректно прижимались к границам scaleble.
Например в мобильной версии общая ширина еще меньше - соответственно нужно еще более уменьшить масштаб и т.д.
Вообще реально ли такое сделать?

Comments

[Ankhena]

Вообще реально ли такое сделать?

Да, реально. Считайте необходимый масштаб и уменьшайте.

Только зачем это всё, если можно сделать нормально.

Вы зачем-то задаете блокам фикс ширину 900 и 500 px.
Если хотите, чтобы они пропорционально изменялись, то используйте гриды, 9fr 5fr. Или проценты. Или единицы измерения от контейнера (если позволяет поддержка).
Для текста также используйте контейнерные единицы. Если поддержка не позволяет, вычисляйте через vw.

И потерялась обертка для адаптивной картинки. Или грид ячейка может выступать в роли такой "обертки". Сейчас ваш contain может работать как заблагорассудится браузеру.

[raving]

Ankhena, контент в scaleble это пример. На деле там будет большое количество html-элементов из которых собирается картинка. Если оставить резиновый адаптив, то текст будет перескакивать на новую строку. элементы смещаться/уменьшаться из-за нехватки пространства и по итогу рисунок будет сломан. По этому нужно масштабировать блок, чтобы все элементы оставались всегда на своих местах, но уменьшались при изменении размеров родителя/экрана

[Ankhena]

raving, текст будет изменяться пропорционально и никуда не перепрыгнет. Это если прочитать рекомендации.

[raving]

Ankhena, единицы измерения от контейнера не поддерживаются. А vw не подходит, т.к. разрешение мониторов у всех разное, а остальная часть сайта сверстана на px

[Григорий]

То что ты хочешь не реально с учётом всех предложенных тебе вариантов которые ты отклонил. Тут есть такая пословица и рыбку съесть и не уколоться

[Ankhena]

raving, переверстайте или используйте calc (вероятно, будет удобнее совместно с кастомными свойствами) или пересчитывайте на js.

[raving]

Ankhena, спасибо, буду пробовать

Answer 1

[Григорий]

Это вопрос по верстке а не JS
у тебя 2 блока растягивают всю верстку из-за этого границы уходят за пределы экрана

<div style="width: 900px; height: 20px; background-color: red"></div>
          <div style="width: 500px; height: 20px; background-color: green"></div>

Comments

[raving]

я знаю, в этом и суть. Это сделано для наглядности. Задача как раз чтобы блок масштабировался

Answer 2

[Антон Антон]

У красного и зеленого вместо width используй flex-basis

Comments

[raving]

Контент это лишь пример. Суть в том, что нужно масштабировать блок, чтобы текст не переносился на новую строку при уменьшении размера родителя, а уменьшался в масштабе и т.д. всеми элементами внутри блока scaleble

[Антон Антон]

raving, чтобы уменьшался размер шрифта проще всего запихать это всё в svg (можно inline). либо подбирать размер шрифта в vw или cqw