Максимизировать родительский блок элемента с заданными соотношениями сторон
Описание
Такая вот ситуация…
…где внутренний серый блок является квадратом (с соотношениями сторон 1/1). Нужно подогнать размер родительского, белого блока за счет увеличения размеров серого блока, максимально как это возможно.
/* Main */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--color-background);
}
body * {
background-color: inherit;
}
/* Global */
*.layer {
background-color: var(--color-foreground);
box-shadow: 0 0 var(--size-shadow) 0px var(--color-shadow);
}
*.depth {
background-color: var(--color-background);
box-shadow: 0 0 var(--size-shadow) 0px var(--color-shadow) inset;
}
/* Local */
:root {
--value-transparence: 50%;
--color-foreground: rgb(255, 255, 255);
--color-background: rgb(225, 225, 225);
--color-shadow: rgba(0, 0, 0, var(--value-transparence));
}<body style="position: fixed; inset: 0; display: grid; grid-template-columns: auto 1fr;">
<menu class="layer" style="width: 40px; display: grid; grid-auto-rows: max-content; place-content: center;">
</menu>
<div style="display: flex; justify-content: center; align-items: center;">
<div class="layer" style="width: fit-content; height: fit-content; display: grid; grid-template-rows: 1fr auto; gap: 1vmin; padding: 1vmin;">
<canvas class="depth" style="height: 100%; aspect-ratio: 1 / 1;"></canvas>
<div style="width: 40px; height: 40px; padding: 1vmin;">
<img style="width: 100%; height: 100%;">
</div>
</div>
</div>
</body>Соотношение сторон с помощью aspect-ratio: 1 / 1; надо сохранить.
Вопрос
Я много чего попробовал: display: grid;, display: flex;, grid-template: 1fr / 1fr;… ничего не помогает. Можете подсказать решение данной проблеме?
Ответы (2 шт):
Не могу давать комментарий пишу через ответ - можно ли у вас сделать одним блоком с внутренними отступами, а треугольнику дать абсолютную позицию? Или же можно попробывать через fit c внутренними отступами:
введите сюда кодCSS
.block{
width: fit-content;
height: fit-content;
}
Описание
Удалось решить проблему, но при display: flex;. То есть если белый блок не является flex контейнером, то ничего не получится. Если и найдете решение например для display: grid;, дополните мой ответ - я приму.
Ещё момент
Почему прикрепляю не запускающий код? Тот код, что работает у меня в Microsoft Edge, не работает во встроенном редакторе Stack Overflow. Вот как собственно у меня выглядит.
Ответ
А код собственно выглядит таким образом:
HTML
<body style="position: fixed; inset: 0; display: grid; grid-template-columns: auto 1fr;">
<menu class="layer" style="width: 40px; display: grid; grid-auto-rows: max-content; place-content: center;">
</menu>
<div style="display: flex; justify-content: center; align-items: center; padding: calc(1vmin * 3);">
<div class="layer" style="width: fit-content; height: 100%; display: flex; flex-direction: column; gap: 1vmin; padding: 1vmin;">
<canvas id="view" class="depth" style="display: flex; height: 100%; aspect-ratio: 1 / 1;"></canvas>
<div style="display: flex; flex-direction: row; gap: 1vmin;">
<div style="display: flex; width: 40px; height: 40px; padding: 1vmin;">
<img style="width: 100%; height: 100%;" />
</div>
<div style="display: flex; width: 40px; height: 40px; padding: 1vmin;">
<img style="width: 100%; height: 100%;" />
</div>
</div>
</div>
</div>
</body>
CSS
/* Main */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--color-background);
}
body * {
background-color: inherit;
}
/* Global */
*.layer {
background-color: var(--color-foreground);
box-shadow: 0 0 var(--size-shadow) 0px var(--color-shadow);
}
*.depth {
background-color: var(--color-background);
box-shadow: 0 0 var(--size-shadow) 0px var(--color-shadow) inset;
}
/* Local */
:root {
--value-transparence: 50%;
--color-foreground: rgb(255, 255, 255);
--color-background: rgb(225, 225, 225);
--color-shadow: rgba(0, 0, 0, var(--value-transparence));
}