Questa è la mia pagina http://inogroup.it/preload/index.htmbackground-size: la copertina non funziona?
Larghezza di scatole immagine è reattivo
come impostare l'altezza per essere reattivo troppo? Come il 50% dello schermo?
Se faccio questo cambiamento:
.pattern{
background-size: contain;
margin-bottom:25px;
width:100%;
height:50%;
}
non funziona
Grazie mille!
Le caselle immagine sono reattive, ma ciò non significa che le immagini corrispondenti siano. Per una struttura più fluida e dinamica, ti consiglio di utilizzare un framework che funzioni per te, come Bootstrap.
Nella versione più recente di Bootstrap è possibile utilizzare il seguente codice per creare un'immagine reattivo (sia in larghezza e altezza):
<img src="images/my_img" class="img-responsive" />
Affinché ciò funzioni, è necessario scaricare l'ultima versione di Bootstrap dal loro sito web (http://getbootstrap.com/) e riferimento nel codice.
OP sta usando immagini di sfondo, non in linea. La domanda è chiedere sullo sfondo: copertura; e l'altezza di ogni div. – jleggio
L'altezza del div può essere impostata utilizzando la proprietà css height o (per impostazione predefinita) dall'altezza dei suoi elementi figli. Poiché le immagini vengono impostate come immagini di sfondo, il div non è in grado di determinare l'altezza da cui dovrebbe provenire, e non esiste un metodo di css puro per regolare l'altezza di un div in modo che si adatti alle dimensioni di un'immagine di sfondo. Cosa si può fare, è impostare le immagini di sfondo da posizionare al centro del div e hanno la dimensione di fondo come copertura:
.pattern-container .pattern {
background-size: cover;
background-position: 50% 50%;
<!-- other rules here -->
}
posizionando l'immagini di sfondo come 50% 50% verticale e centri orizzontale nel div contenitore a prescindere delle dimensioni del div. Detto questo, l'immagine stessa potrebbe ritagliare i bordi se il rapporto di formato del div è inferiore al rapporto di aspetto dell'immagine (ad esempio se il div è di 30 px di larghezza e 10 px di altezza e l'immagine è di 40 px di larghezza e 10 px di altezza, quindi l'immagine sta per perdere 5 px da entrambi i lati).
Richard il tuo aiuto è stato assolutamente fantastico! GRAZIE MILLE!!! – Alex
Nessun problema :) Se questa è la risposta corretta, puoi cliccare sul segno di spunta per contrassegnarlo come risposta accettata :) –
background-size: deve venire DOPO background: non so se questo è vero per tutti i browser, ma è certamente una funzionalità di Chrome che può farti impazzire.
Questo ha risolto il mio problema con un'immagine di sfondo che si rifiuta di coprire un DIV. – Valorum
Grazie! Questo mi ha ossessionato per ben 20 minuti, stavo andando a impazzire;) –
Aggiungendolo dopo aver impostato l'immagine funziona, proprio come l'impostazione di '! Important'. – panepeter
È necessario utilizzare la proprietà background-image per definire l'immagine di sfondo.
Quindi questo non funzionerà
<img class="image" style="background: url(image.jpg);" />
.image { background-size: cover; }
causa di fondo è il codice stenografia e prende i valori di default per tutti i parametri omessi.
Ma se si esegue questa operazione
<img class="image" style="background-image: url(image.jpg);" />
.image { background-size: cover; }
Questo wil risolvere il problema.
Si desidera sfondo: la copertina funziona o si desidera che l'altezza delle scatole sia pari al 50% dello schermo? Hai 2 domande qui con risposta diversa :) –