html - hacer - Haz un cuadrado<div> cuando haya un ancho cambiante dinámicamente basado en el porcentaje

hacer un cuadrado con html

Question

Esta pregunta ya tiene una respuesta aquí:

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

Estoy trabajando en una aplicación web que generará una cuadrícula NxN basada en la selección de N. del usuario. Quiero que el ancho total de la cuadrícula sea relativo (es decir, el 100% del espacio disponible) para que los usuarios puedan imprimir en varios tamaños de papel .

Puedo calcular fácilmente el ancho de los cuadrados en la cuadrícula en% (es decir, 100% / N), pero tengo problemas para calcular la altura. La altura de una página web siempre será infinita a menos que la limite artificialmente, lo que, como dije, no quiero hacer.

¿Cómo puedo hacer que los cuadrados de mi cuadrícula sean cuadrados frente a los rectangulares cuando las restricciones de altura y ancho de mi cuadrícula son dinámicas y no cuadradas?

Answer 1

Esto no está probado, no sé cómo hacerlo solo en CSS, usaría jQuery.

$(''div'').height($(''div'').width());

Answer 2

Existen 2 técnicas principales para mantener la relación de aspecto de un elemento sensible, usando unidades de relleno y vw:
(para una solución completa para una cuadrícula de cuadrados receptiva, puede ver esta respuesta )

Usando unidades vw

Puede usar unidades vw para hacer que sus elementos sean cuadrados y sensibles ( unidades de vista en MDN ).
1vw = 1% of viewport width para que pueda establecer la altura de los elementos de acuerdo con el ancho de la ventana gráfica.
Ejemplo con una grilla 4x4:

body{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}

div{
    width:23vw; height:23vw;
    margin:1vw 0;
    background:gold;  
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

Se puede lograr el mismo comportamiento al dimensionar el elemento según la altura de la ventana gráfica en unidades vh .

Usando relleno

El relleno se calcula de acuerdo con el ancho de los contenedores para que pueda usarlo para establecer la altura del bloque de acuerdo con su ancho.
Ejemplo con una grilla 4x4:

.wrap {
    width:80%;
    margin:0 auto;
}
.wrap div {
    width:23%;
    padding-bottom:23%;
    margin:1%;
    float:left;
    background:gold;
}

<div class="wrap">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

Answer 3

Hacer un div un cuadrado es bastante fácil con CSS. Usted establece un ancho, digamos 50%. A continuación, agrega un relleno inferior del mismo valor:

div {
width: 50%;
padding-bottom: 50%;
}

y se mantendrá cuadrada cada vez que cambie el tamaño de la ventana.

.

.

Puede hacer esto con cualquier proporción lateral que desee, si desea que la caja sea 16: 9, calcule:

9/16 = 0.56

que luego multiplicas por el ancho de tu elemento (en este caso 50% (= 0.5)), entonces:

9/16 * 0.5 = 0.28 = 28%

Answer 4

La solución anterior no conserva el área - esta es mejor

        //@param {jQuery} div 
        function makeSquare(div){
            //make it square !
            var oldDimens = {
                h : div.height(),
                w : div.width()
            };
            var area = oldDimens.h * oldDimens.w;
            var l = Math.sqrt(area);
            div.height(l).width(l);
        }