Quiero crear una div
que sea cuadrado y responsivo, es decir, que si se cambia el tamaño de la pantalla (o si cambia el dispositivo con el que se la página web) el cuadrado crezca/decrezca proporcionalmente, pero siempre con forma de cuadrado.
Para ello tengo el siguiente código con padding-top
:
.cuadrado {
width:25%;
height:0;
padding-top:25%;
position:relative;
background:red;
}
<div class="cuadrado"></div>
Eso funciona sin problemas hasta que intento limitar el tamaño del cuadrado con un max-width
, entonces el ancho se limita pero no el padding-top
lo que hace que la figura deje de ser un cuadrado y pase a ser un rectángulo en pantallas grandes:
.cuadrado {
width:25%;
max-width:100px;
height:0;
padding-top:25%;
position:relative;
background:red;
}
<div class="cuadrado"></div>
¿Cómo puedo cambiar el código para que la figura sea cuadrada siempre?¿Debería enfocarlo de otra manera en lugar de usando padding-top
(que parece algo hacky)?
max-height
no funcionaría porqueheight
es 0 que siempre será menor. Pero lo que mencionas devw
sí que podría funcionar. Deberías ponerlo como respuesta (al menos te llevarías mi +1)