Не получается создать пропорционально изменяемый размер div со всеми дочерними элементами
Перерыскал весь интернет. Не могу понять как сделать так, чтобы условный main контейнер w=80vw h=65vh, который находится сразу под шапкой сайта, имел симметричные отступы 10vh 10vw 0 10vw, и при сохранении отступов, в случае изменения ширины экрана, менял свой размер с сохранением исходных пропорций 16/13 с масштабированием всех дочерних элементов (текста, grida и ТД).
Делал с aspect-ratio и padding-bottom, результаты неудовлетворяющие. Может у кого-то уже есть готовое решение?
Ответы (1 шт):
Во-первых, чтобы получить ответ, вам не мешало бы ознакомиться с правилами в которых говорится о том, что нужно предоставить то, что вы уже сделали, чтобы остальным было понятно что вы пытались сделать и что у вас не получилось.
Во-вторых вы совершенно неправильно размышляете рассуждая о пропорциях в контексте измерений. Нельзя указать одновременно высоту и ширину и ждать пропорциональных изменений по отношению к размеру экрана. Что касается отступов... то о каких вы — margin padding и какого поведения вы от них ждёте? И, что уж говорить о вашей формулировке "изменяемый размер div со всеми дочерними элементами" — это из области додумайте сами?
В общем вот вам пример того как делаются пропорциональные блоки:
* {
margin: 0;
padding: 0;
}
header {
background-color: grey;
}
main {
background-color: gold;
width: 80vw;
aspect-ratio: 16 / 13;
margin: 10vh 10vw 0 10vw;
}<header>HEAD</header>
<main><h1>Az</h1></main>Но дабы посмотреть на это вживую, то лучше воспользоваться JSFiddle [тыц]