Perché l’immagine di sfondo non viene visualizzata senza larghezza e altezza specifiche?

Ecco un codice di esempio

Mi sono chiesto perché l’ background-image non viene visualizzata a meno che non specifichi la larghezza e l’altezza dell’immagine in pixel. Ho provato a specificare solo la larghezza in percentuale ma non ha funzionato. Il w3cschools.com è stato in grado di mostrare l’immagine di sfondo senza specificare la larghezza e l’altezza, ma funziona solo sullo sfondo del corpo. Qualche spiegazione o soluzione alternativa?

HTML

 

CSS

 .pic { background: url("http://sofit.miximages.com/css/HIt6f8r.png") no-repeat; display: block; position: relative; width: 244px; height: 230px; background-size: contain; } 

Il tuo elemento

non ha alcun contenuto, quindi l’altezza

è 0px.
La larghezza di

è ancora del 100%.
Se aggiungi del contenuto al div questo avrà un’altezza e mostrerà una porzione di immagine.
di default ha l’altezza della finestra, quindi puoi vedere l’immagine di sfondo.

Ho trovato un’ottima alternativa senza specificare l’altezza, grazie a http://blog.brianjohnsondesign.com/maintain-aspect-ratio-for-html-element-using-only-css-in-a-desponsive-design/ . HTML

 

CSS

 .pic { background: url("http://sofit.miximages.com/css/HIt6f8r.png") no-repeat; display: block; position: relative; width: 20%; height: 0; padding-bottom: 20%; background-size: 100%; } 

Tutto quello che devi fare, assumendo che sia un quadrato, abbinare il padding-bottom alla larghezza in css.

Aggiornamento: ho anche sentito parlare di un’altra soluzione che potrebbe essere utile. http://www.mademyday.de/css-height-equals-width-with-pure-css.html

CSS

 .pic { position: relative; width: 50%; } .pic:before { content: ""; display: block; padding-top: 100%; } 

anche se non l’ho ancora testato ….

 

Div è contenitore, si aspetta di avere elementi interni, quando è vuoto devi definire esplicitamente l’altezza.

Se non si specifica l’altezza, la dimensione del div è data dalla dimensione del suo contenuto, cioè è 0x0, quindi non si hanno molte possibilità di vedere un’immagine di sfondo. Inserisci

 border: 1px solid red; 

per vedere quanto è grande il tuo div (o non lo è).