Algo que você não sabia sobre preenchimento CSS

O uso de %unidades no preenchimento CSS corresponde à largura do contêiner, mesmo se você usar padding-top / padding-bottom:

.container { width: 320px; }
.child { padding-bottom: 50%; } /* 160px */