Возможно ли изменить размер рендера вёрстки?

Question

[del993788]

Здравствуйте. Сразу хочу извиниться за слово рендер, но ничего более подходящего я не нашел.
Как сделать так, чтобы при уменьшении экрана и достижении размера >850 блоки не переносились на новую строку, а просто начинал уменьшаться масштаб (scale) этих блоков (всего контента)? С картинкой, думаю, будет понятнее:


https://jsfiddle.net/g4r6wmLf/1/

Я пытался через scale, но это не совсем то, что мне нужно, так как уменьшение идёт с выравниванием по центру...

Answer 1

[McBernar]

Ну так задайте в процентах ширину. Будут пропорционально уменьшаться.

Comments

[del993788]

Мне нужно, чтобы и ширина и высота менялась

[McBernar]

qqignatqq, а, да, это прикол. Я делал через js, но, взможно, сейчас есть другие способы.

Answer 2

[MarvinJan]

Я так понял нужен блок который сохраняет пропорции? Без js только костылями наподобие этих:

Логика в том, что padding берет за основу ширину родительского блока, когда указан в процентах, будь то горизонтальные или вертикальные паддинги. За счет этого можно установить aspect ratio. В гугле даже таблицы под нужные можно найти в процентах паддинга.

Answer 3

[Владимир]

Кто мешает тебе высоту и ширину дочернего блока задать в vw?
https://developer.mozilla.org/en-US/docs/Learn/CSS...
кто мешает использовать флексбокс?
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Comments

[del993788]

А как в flexbox указать относительную ширину и высоту?

[Владимир]

qqignatqq, разрешаете flex-shrink и указываете flex-base в процентах.
Но опять, зачем задавать ширину во флексе если можно ширину и вісоту блока указать в vw