Creazione di una foto in una vista cerchio usando i CSS solo

Question

funziona Il codice seguente

<div style="width:485px; height:485px; border-radius:50%; overflow:hidden;"> 
<img src="avatar.png" alt="Squared Avatar" /> 
</div> 

Ma questi codici non saranno,

<div style="width:100%; height:100%; border-radius:50%; overflow:hidden;"> 
<img src="avatar.png" alt="Squared Avatar" /> 
</div> 

Mi chiedo solo perché larghezza e l'altezza deve essere px al fine di raggiungere tale effetto, piuttosto che percentuale? So che usare la percentuale è più flessibile dell'uso di px.

Ecco jsfiddle, se ridimensionare il riquadro dei risultati, si può vedere il P1 ridimensiona automaticamente come previsto per l'utilizzo di percentuale, quindi la domanda è dove questo 100% da? Ho pensato che il 100% indica la larghezza e l'altezza dell'immagine piuttosto che la cornice.

Aggiornamento =====: 2014/12/26 ======

Grazie ragazzi, @ jmore009 ha risposto alla domanda.

ho dimenticato div larghezza eredita e l'altezza dalla sua div genitore, in modo che il 100% è dal corpo elemento , che ridimensiona quando il browser ridimensiona per impostazione predefinita. Ecco il mio aggiornato jsfiddle.

Answer 1

percentuali di lavoro di un genitore. sta dicendo 100% di qualcos'altro o 50% di qualcos'altro, se non si definisce il genitore height e/o width (il genitore di livello più alto è body e html), allora non si ha nulla su cui lavorare.