3

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)?

5
  • 1
    usando vh y vw? ya lo has probado? Commented el 22 ene. 2017 a las 16:31
  • El principal motivo para lo que busco es usarlo en dispositivos móviles. Si el soporte para móvil es amplio, me vale.
    – Alvaro Montoro
    Commented el 22 ene. 2017 a las 16:33
  • Lo único es que busco hacerlo sólo con HTML/CSS sin JavaScript
    – Alvaro Montoro
    Commented el 22 ene. 2017 a las 16:33
  • pero se deforma por que solo restringes lo ancho, no seria asi? ` max-width:100px max-height:100px` Commented el 22 ene. 2017 a las 16:58
  • 1
    @x-rw en este caso max-height no funcionaría porque height es 0 que siempre será menor. Pero lo que mencionas de vw sí que podría funcionar. Deberías ponerlo como respuesta (al menos te llevarías mi +1)
    – Alvaro Montoro
    Commented el 22 ene. 2017 a las 21:12

3 respuestas 3

3

Usando vh quedaría siempre cuadrado

.cuadrado {
  width:25vh;
  max-width:100px;
  height:25vh;
  max-height:100px;
  position:relative;
  background:red;
}
<div class="cuadrado"></div>

4
  • @AlvaroMontoro funciona en el snipet, siempre queda cuadrado Commented el 23 ene. 2017 a las 14:39
  • 1
    Ahora sí. Gracias por la paciencia
    – Alvaro Montoro
    Commented el 23 ene. 2017 a las 14:40
  • @AlvaroMontoro pero no es lo suficiente adecuado para lo que necesitas? Commented el 23 ene. 2017 a las 19:57
  • Sí, de hecho se ajusta mejor a lo que necesito porque sólo tengo que cambiar el CSS y no la estructura HTML
    – Alvaro Montoro
    Commented el 23 ene. 2017 a las 20:17
1

.square {
  border-style:solid;
  border-width:2px;
  border-color:red;
  position: relative;
  width: 50%;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
}
<div class="square">
  <div class="content">
    Hello!
  </div>
</div>

Pruébalo así

0

Has probado con:

.cuadrado {
  width:25%;
  height:auto;
  padding-top:25%;
  position:relative;
  background-color:red;
  margin: 0 auto;
}

Al ser height: auto, se ajusta automaticamente al width.

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.