Cómo realizar las divisiones cuadradas sensibles con una relación 1: 1 en la respuesta

Puede establecer un ancho porcentual en el div, digamos 25%, y luego darle un relleno equivalente (o superior) del 25%. Dado que tanto el ancho como el relleno se basan en el ancho del elemento principal, se escalará verticalmente en una proporción de 1: 1. Entonces necesitaría darle al div una posición: relativa y darle a su contenido una posición: absoluta. Ejemplo y tutorial más completo:
https://css-tricks.com/NetMag/Fl…

Alternativamente, en lugar de poner relleno directamente en el div, puede ponerlo en uno de los elementos psuedo del div (: before o: after). Dándole una pantalla: bloque; contenido: ”; y fondo acolchado: 100%; le dará una altura equivalente al ancho del div. Esto es un poco más flexible, ya que no tiene que cambiar el relleno si / cuando cambia el ancho del div (digamos del 25% al ​​50%). Sitio de ejemplo:
http://www.mariasharapova.com/