Usa CSS (y quizás JavaScript) para hacer que un elemento sea cuadrado (o mantener una relación de aspecto específica)

Tengo un div que quiero tener las siguientes características:

Ancho = 50% de su elemento padreAltura igual a lo que sea necesario para mantener una cierta relación de aspecto.

Necesito usar porcentajes porque el objeto cambiará de tamaño de izquierda a derecha cuando se cambie el tamaño del navegador. Quiero que el objeto se redimensione de arriba a abajo para asegurar que el objeto mantiene la misma relación de aspecto.

No creo que haya ninguna forma de usar CSS puro para hacer esto, pero ¿alguien sabe de alguna manera? Alternativamente, ¿hay una forma fácil de JavaScript para hacer esto? (JQuery está bien.)

Respuestas a la pregunta(4)

Su respuesta a la pregunta