altezza div = la sua larghezza, in percentuale, in modo che il div assomiglia a un quadrato, con forma non quadrata dell'elemento contenitore (solo CSS)

Question

Ho impostato le larghezze e le altezze dei miei elementi in percentuali in modo che sembrino un poco più grande su schermi più grandi e normale su quelli normali. Ho anche impostato min-height e min-width in modo che il layout non sia distorto quando si visualizza su uno schermo troppo piccolo. Voglio che uno dei miei elementi appaia come un quadrato, ma non riesco a trovare una soluzione solo CSS perché accada.

Ecco cosa ho provato: http://jsfiddle.net/5VTTD/, ma non ha funzionato.

Questo funziona: http://jsfiddle.net/5VTTD/1/, ma utilizza JS.

Answer 1

avrete bisogno di un esterno <div> come un contenitore e poi una interna come un quadrato.

Ho usato il 50% di dimensioni per il quadrato, ma puoi usare la dimensione desiderata: sarà relativa al contenitore genitore <div>.

Ho anche dato un colore di sfondo nero per evidenziarlo: qui c'è un DEMO.

Il trucco è tutto nel padding-bottom: 100% del genitore <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

un'occhiata a questo: http://jsfiddle.net/5VTTD/9/