Dimensioni massime per l'immagine di sfondo CSS

Question

Ho una casella di 70 x 50 px e ho varie immagini, (file SVG, quindi senza dimensioni) Voglio mantenere le proporzioni, ma alcune immagini sono verticali e alcune sono di dimensioni orizzontali. Così posso fare:

background-size: 70px auto; 

e che funzionerà per tutte le icone del paesaggio. Ma allungherà le immagini del ritratto e le renderà più alte, quindi avranno ancora le proporzioni corrette, ma la parte superiore e inferiore saranno tagliate.

c'è qualche tipo di background-max-size?

(in alternativa, l'unica ragione per cui immagine di sfondo sto usando è perché si può centrare allineare l'immagine, in orizzontale e in verticale , quindi l'alternativa è quella di trovare il modo per allineare verticalmente un elemento img all'interno di un elemento li.)

Answer 1

Questo è un problema che il CSS non può risolvere da solo. Ci sono librerie JavaScript che faranno questo lavoro. Se si utilizza jQuery, è possibile trovare un plug-in o eseguire la propria funzione.

Afferra il width e height dell'immagine e calcola il rapporto (x/y). Se il rapporto è superiore a 70/50 (1,4), impostare la larghezza su 70 px e l'altezza su (70 * x/y). Se il rapporto è inferiore a 70/50 (1,4), impostare l'altezza su 50 px e la larghezza su (50 * x/y).

vedere anche CSS vertical-align

Se si utilizzano i browser che non supportano vertical-align, è possibile posizionare l'immagine assolutamente al 50%, e impostare il margine superiore a (larghezza * -0.5) utilizzando JavaScript. Ciò allinea la metà dell'immagine con il centro dell'elemento genitore, che è lo stesso dell'allineamento del centro verticale.

Answer 2

Non è così difficile farlo con i CSS

• prima, si prega di dare un'occhiata a the Mozilla Specs per unità miste per background-size.
• 2a, si consideri semplicemente l'impostazione background-size: contain; (IE9 +, Safari 4.1+, FF 3.0+, Opera 10+) e min/max-width/height per l'elemento contenitore.

Answer 3

È possibile risolvere questo problema senza JavaScript utilizzando una combinazione di CSS3 background-size e media-query. es .:

@media only screen and (max-width: 1000px) { 
    #element { 
     background-size: contain; 
    } 
} 

Nota che né supportati in IE8 o al di sotto, così si dovrebbe includere fallback per vecchio IE se ancora lo supportano.

Answer 4

La risposta a questa domanda è un po 'antiquata. Come menziona lo stringman5, nessuna delle opzioni CSS è supportata in IE8 o in basso. Inoltre, non è la scelta migliore per avere jQuery per gestire le immagini di sfondo, se non è necessario. Per poter utilizzare un'opzione che include le ricadute per il browser più vecchi, senza l'utilizzo di JavaScript, si può fare qualcosa in questo senso:

#myElement { 
    background: #FFFFFF url('mybackground.jpg') no-repeat right top; 
} 

@media only screen and (max-width: 1024px){ 
    #myElement { 
     background-size: 50%; 
    } 
} 

Si noti che sto usando max-width nel mio media query, questo significa che sarà background-size: 50%; essere applicato FINO a 1024px. Oltre quel punto, fa la sua dimensione predefinita.Nei browser meno recenti che non supportano le query multimediali o le dimensioni in background, ignoreranno le opzioni e renderanno la dimensione massima dell'immagine di sfondo (dimensione predefinita).