html - Div interior con relación de cuadrados y flexbox

css css3

Question

Esta pregunta ya tiene una respuesta aquí:

• Mantener la relación de aspecto de un div con CSS 22 respuestas

Estoy tratando de lograr lo siguiente:

Donde el cuadro azul es de altura variable y el cuadro amarillo siempre tiene una altura del 50% del cuadro azul.

Es bastante simple usando flex

<div style="display:flex;align-items:center">
<div id="yellow" style="height:50%">
</div>
</div>

El problema es que estoy intentando mantener la caja interna en una proporción específica, en este caso cuadrada. ¿Cómo me acerco a esto?

Puntos extra:

• ¿Cómo generalmente especifico una relación? ¿Existe una solución que funcione no solo para 1: 1 sino también para x: y?
• ¿Cómo podría hacer eso sin usar flexbox mientras potencialmente todavía apunte a)?

Información adicional: el cuadro azul siempre es más ancho que alto, piense en un botón.

Answer 1

A ver si esto te puede ayudar,

.outer {
background-color: lightblue;
height: 100px; /* Change as per your requirement */
display: flex;
align-items: center;
justify-content: center;
max-width: 200px; /* You can Remove this */
}
.inner {
background-color: lightyellow;
height: 50%;
width: 50px;
}

<div style="" class="outer">
<div id="yellow" class="inner">
</div>
</div>

Answer 2

Intenta esto si te puede ayudar (sin flexión)

 .outerdiv
{
background-color: lightblue;
height: 100px;
display: grid;
align-items: center;
}
.innerdiv
{
background-color: lightyellow;
height: 50%;
width: 50px;
margin:0 auto;
}
<div style="" class="outerdiv">
<div id="yellow" class="innerdiv"></div>
</div>

Answer 3

No creo que haya una manera de definir el ancho usando la altura (incluso si podemos hacer lo contrario usando algún truco como el relleno), pero una idea es confiar en una imagen cuadrada que haces invisible para mantener la proporción. . Entonces el contenido debe ser posicionado:

#blue {
display: flex;
align-items: center;
justify-content:center;
height:80vh;
background: blue;
}
#yellow {
height: 50%;
background: yellow;
position:relative;
}
img {
max-height:100%;
visibility:hidden;
}
#yellow .content {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
}

<div id="blue" >
<div id="yellow" >
<img src="https://picsum.photos/500/500?image=1069" >
<div class="content">Some content here</div>
</div>
</div>

Pero en caso de que la altura del azul sea un valor fijo, mejor confíe en la variable CSS como esta:

#blue {
display: flex;
align-items: center;
justify-content:center;
--h:80vh;
height:var(--h);
background: blue;
}
#yellow {
height: calc(var(--h) / 2);
width:calc(var(--h) / 2);
background: yellow;
position:relative;
}

<div id="blue" >
<div id="yellow" >
<div class="content">Some content here</div>
</div>
</div>

Answer 4

Si giras 90 grados, es posible :)

• ancho y alto variable del padre (y ratio)
• El niño siempre es 50% tan alto como su padre.
• y un cuadrado

Sin embargo, se superpondrá a otro contenido si así lo desea debido a la transformación.

⇒ Codepen

.flex {
display: table-cell; /* allows "vertical" centering (not possible with flex/grid here because of the padding-top trick on child) */
width: 12rem;
height: 20rem;
vertical-align: middle; /* "vertical" centering */
transform: rotate(90deg) translateY(-50%); /* vertical becomes horizontal */
background-color: lightblue;
}
.flex.large {
height: 35rem;
}
.item {
width: 50%;
height: 0;
margin-left: 25%; /* "horizontal" centering */
padding-top: 50%; /* padding-top trick for a square */
background-color: lightyellow;
}

<div class="flex">
<div class="item"></div>
</div>
<hr>
<div class="flex large">
<div class="item"></div>
</div>

Answer 5

Una respuesta similar a la proporcionada por Temani Afif, pero utilizando un svg en lugar de una imagen (por lo que no es necesario realizar la solicitud adicional).

Además, es más fácil adaptarlo a relaciones de aspecto arbitrarias.

.container {
height: 150px;
background-color: lightblue;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
}
.aspectRatio {
display: grid;
background-color: yellow;
height: 50%;
}
.aspectRatio svg {
height: 100%;
border: solid 1px red;
animation: resize 1s infinite;
}
.aspectRatio > * {
grid-area: 1 / 1 / 2 / 2;
}
@keyframes resize {
from {height: 100%;}
to {height: 99.9%;}
}

<div class="container">
<div class="aspectRatio">
<svg viewBox="0 0 1 1"></svg>
<div class="inner">square</div>
</div>
</div>
<div class="container">
<div class="aspectRatio">
<svg viewBox="0 0 4 3"></svg>
<div class="inner">ratio 4/3</div>
</div>
</div>