Estoy haciendo un diseño básico manteniendo la relación de aspecto 2:1 en base al ancho del viewport (vw).
Si tengo los elementos:
<body>
<div class="container">
<div class="terrain">
...
</div>
</div>
</body>
con las siguientes clases:
.container{
width: 100vw;
height: 100vh;
}
.terrain{
width: 80vw;
height: 40vw; /* uso el ancho del viewport para darle un alto proporcional (80vw/2 = 40)*/
}
Por ahora no existe ningun problema ya que esto es un diseño simple...
El problema aparece cuando necesito poner ese elemento con la clase .terrain
dentro de otro padre que no dependa del vw(view width)
No encuentro alguna forma (en CSS) de darle esa proporción al elemento con clase .terrain
en caso de que su padre tenga un ancho fijo(px) o porcentual(%).
La pregunta concreta es:
¿Cómo puedo usar el ancho del padre para darle un ancho y alto al hijo usando CSS sin recurrir a Javascript?