Hoy os traigo un truquito para hacer cuadrados perfectos responsive, o rectángulos, también responsive, que mantengan sus proporciones.
Cuando queremos hacer un cuadrado responsive con porcentajes, el problema viene con el alto, porque lógicamente, el porcentaje que demos al alto, se refiere al alto del contenedor y lo normal es que si estamos haciendo un sitio responsive, desconozcamos el alto del padre porque será fluido. Por ello no podremos igualarlo al ancho.
La gracia está en saber que los paddings siempre se refieren al ancho, de modo que voy a utilizarlo para hacer un «falso height» y que sea igual que el ancho.
¿Cómo lo hacemos? Añadiendo un pseudo-elemento con un padding 100%, que como hemos dicho será el 100% del ancho, y por lo tanto igual, ¡ya tenemos nuestro cuadrado responsive!
Revisión del 26/07/2016
Como respuesta a una duda que me preguntaron, acerca de cómo meter contenido en los cuadrados (podéis ver debajo los comentarios), Gabriel Mondragón nos daba una solución que yo no conocía y me parece muy buena. Ya la he incluido en el pen.
Lo que yo he hecho siempre para meter contenido en los cuadrados era meterlo en un nuevo contenedor y posicionarlo al centro, porque normalmente el diseño que acompaña a este tipo de cajas suele llevar el contenido centrado. Pero si lo que queremos es usar el cuadrado como un div normal, flotando el pseudo-elemento a la izquierda como propone Gabriel, lo tengo solucionado y puedo meter el contenido que quiera.
Lo único que tenéis que tener en cuenta es que cuando el contenido sea mayor que el alto del cuadrado, dejará de ser un cuadrado, pero está bien porque no habrá desbordamientos como ocurre si lo posicionamos.
Podéis ver el ejemplo aquí:
See the Pen Responsive Squares by Diana (@diana_aceves) on CodePen
Simplemente genial. Muchas gracias Diana!
Gracias a ti por el feedback! 😉
Hola muchas gracias, me resulto 🙂
ahora si quisiera colocar texto dentro de este recuadro como lo hago? lo intente y el cuadrado se deforma hacia abajo.
Saludos!
Hola, tendrías que posicionar de manera absoluta el elemento con el texto para centrarlo en el cuadrado. Slds!
Solo pon a flotar al pseudo-elemento a la izquierda:
.square:before{
content:»»;
display:block;
padding-top:100%;
float:left;
}
Así podrías usar el cuadro como una div cualquiera.
Qué crack Gabriel, gracias!! como normalmente este tipo de cajas son para contenido bastante controlado y casi siempre debe estar centrado, yo lo posicionaba y lo centraba. Pero lo del float es una idea genial. Gracias!!!
Tienes usuario de Twitter?
Perdona Diana, a que te refieres con que ‘los padding siempre se refieren al ancho’? Gracias de antemano
Tanto los márgenes como los paddings en % se refieren al ancho siempre, los laterales y EL SUPERIOR E INFERIOR, es decir, si dices padding-top: 10%; va a ser el 10% del ancho, no del alto, aunque el padding sea vertical.
Normalmente pensaríamos que un porcentaje para un padding vertical se referiría al alto de la caja, pero no es así.
Qué curioso Diana! gracias!
Gracias a ti! 😉