Qual è la differenza tra la dimensione dello sfondo: copertina; e dimensione dello sfondo: 100% ;?

Question

Quando si imposta la proprietà background-size da un'immagine di un div a background-size: cover; o background-size: 100%;, entrambi hanno lo stesso aspetto.

Qual è la differenza? Quando devo usare la copertura e quando il 100%?

Answer 1

copertina = Ridimensionare l'immagine di sfondo affinché sia ​​il più grande possibile in modo che l'area di sfondo sia completamente coperta dall'immagine di sfondo. Alcune parti dell'immagine di sfondo potrebbero non essere visibili nell'area di posizionamento dello sfondo

Fondamentalmente esegue lo zoom avanti finché i bordi più interni non toccano il lato, il che significa che parte dell'immagine potrebbe essere tagliata a differenza del 100% dove tutto dell'immagine sarà visibile.

Vedi http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover ad esempio

Answer 2

Abbastanza sicuro dimensioni di sfondo: copertura; significa che l'immagine riempirà l'elemento mantenendo le proporzioni, mentre la dimensione dello sfondo: 100%; farà semplicemente riempire l'immagine al 100% della larghezza dell'elemento.

Answer 3

ecco un violino: http://jsfiddle.net/RS5kX/19/

background-size:100%; = background-size:100% auto; = la larghezza è impostato per essere grandi al 100% e l'altezza dell'immagine di sfondo segue rispettando le proporzioni dell'immagine.

background-size:cover; significa che l'immagine di sfondo sia sempre in forma tutta la div, non sarà lasciato con tutti i punti vuoti nel tuo div

background-size:100% 100% 

non lascia alcun spazio vuoto troppo, ma ovviamente questo sarà rimuovi le proporzioni originali dell'immagine