altura de div = su ancho, en porcentajes, para que el div se vea como un cuadrado, con forma no cuadrada del elemento contenedor (solo CSS)

Question

He establecido el ancho y alto de mis elementos en porcentajes para que se vean un poco más grande en pantallas más grandes y normal en las normales. También configuré min-height y min-width para que el diseño no se distorsione cuando se ve en una pantalla demasiado pequeña. Quiero que uno de mis elementos aparezca como un cuadrado, pero no puedo encontrar una solución CSS para que ocurra.

Esto es lo que probé: http://jsfiddle.net/5VTTD/, pero no funcionó.

Esto funciona: http://jsfiddle.net/5VTTD/1/, pero usa JS.

Answer 1

necesitará un <div> externa como un recipiente y luego una interna como un cuadrado.

Usé 50% de las dimensiones para el cuadrado, pero puede usar el tamaño que desee: será relativo al contenedor principal <div>.

También le di un color de fondo negro para resaltarlo: aquí hay un DEMO.

El truco está todo en el padding-bottom: 100% del padre <div>.

CSS:

#container { 
    position: relative; 
    width: 100%; 
    padding-bottom: 100%; 
} 

#square { 
    position: absolute; 
    width: 50%; 
    height: 50%; 
    background-color: #000000; 
} 

HTML:

<div id="container"> 
    <div id="square"> 
    </div> 
</div> 

Answer 2

echar un vistazo a esto: http://jsfiddle.net/5VTTD/9/