CSS sfondo utilizzando "background-size: cover" non va bene l'intera altezza

Sto facendo una pagina che sarà solo visualizzare un'immagine SVG, e qui sono i requisiti:CSS sfondo utilizzando "background-size: cover" non va bene l'intera altezza

il vettore dovrebbe prendere l'intera finestra
il vettore dovrebbe mantenere il suo rapporto di aspetto (definito nel file SVG stesso)
il vettore deve ritagliare/clip al fine di prevenire inclinazione

il CSS ...

body { 
    background: url(/path/to/image.svg); 
    background-size: cover; 
}

... Lavori quasi perfettamente tranne che quando la finestra del browser diventa troppo stretta che piastrelle invece di ritaglio/clipping.

Ecco alcuni screen shots (si prega di ignorare i manufatti lasciati dai dabblet): window close to aspect ratio

Ecco la finestra è vicino al rapporto di aspetto dell'immagine originale window "shorter" than aspect ratio

Qui la finestra è "più corto "rispetto al rapporto aspetto e l'immagine ritaglia (come desiderato).

Qui la finestra è "più stretta" rispetto al rapporto di formato, ma invece di ritagliare, l'immagine è piastrellata (indesiderata).

Ecco alcuni pensieri che ho avuto ...

Potrei cambiare l'immagine SVG in qualche modo per evitare che ciò accada?
Posso markup/stile la pagina per ottenere i risultati desiderati?
Preferirei mantenere il dominio di HTML/CSS, ma se Javascript è necessario, allora so-be-it.

Ecco il dabblet che stavo lavorando con ... http://dabblet.com/gist/6033198

fonte

2013-07-18 apocryphalauthor

Nizza domanda.Peccato che non abbia voti :) – null

la piastrellatura si verifica automaticamente per gli sfondi in css, basta usare 'background-repeat: no-repeat;' – Pebbl

@pebbl Hai ragione, la ripetizione dello sfondo impedirebbe al vettore di ripetere, ma ciò non 't fissare il fatto che la dimensione y del vettore non viene calcolata correttamente. L'immagine dovrebbe riempire la dimensione y della finestra. – vals

Dopo alcuni tentativi ed errori, questo è quello che ho trovato.

Aggiunta (al CSS originale):

html { 
    height: 100% 
}

consegnato esattamente quello che stavo cercando nelle specifiche originali.

Inoltre, se volevo l'immagine di essere il centro, quando fu tagliata, ho potuto utilizzare:

html { 
    background: url(path/to/image.jpg) no-repeat center center fixed; 
    background-size: cover; 
}

Infine, se volevo che essere centrato, sempre mantenere il rapporto di aspetto, ma non essere ritagliata (vale a dire, un po 'di spazio bianco è OK) poi ho potuto fare:

body { 
    background: url(/path/to/image.svg) no-repeat center center fixed; 
    background-size: contain; 
}

fonte

2013-07-20 00:07:32 apocryphalauthor

-3

Questa CSS è working.Thanks

"background-size: contain;" 

.cover{background:url(images/cover.jpg) no-repeat top center; display:inline-block; width:100%; height:400px; background-size: contain;} 

<div class="cover">&nbsp;</div>

fonte

2013-12-17 07:04:56 Raghibsuleman

CSS sfondo utilizzando "background-size: cover" non va bene l'intera altezza

risposta

Problemi correlati