Sviluppo HTML
  1. Sviluppo HTML
  3. Perché l’immagine di sfondo non viene visualizzata senza larghezza e altezza specifiche?
Intereting Posts
Disabilitare il riempimento automatico di Safari su nomi utente e password Suggerimenti su come creare uno strumento Diff HTML? Aggiungi class al pulsante di opzione Quando usare il Jumbotron? Può un’immagine scorrere con il testo accanto a un elemento flottato? Res.write non funziona quando si invia continuamente pacchetti UDP come posizionare le div all’interno di un altro div Controlla se una finestra è popup o no? i file di risorse stanno arrivando vuoti quando sono ospitati localmente Incremento di un contatore quando si fa clic su un pulsante (JavaScript, HTML) Supporto mappa immagine in Firefox, Chrome e altri browser Come rendere l’input autofocus in Internet Explorer? Google Maps esegue l’implementazione javascript con il modulo di posta elettronica all’indirizzo geocoder Come centrare l’immagine in un div orizzontalmente e verticalmente Come può allineare il testo in un centro nella posizione sinistra?

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 è).