Adatta l'immagine di sfondo al div

Ho un'immagine di sfondo nel seguente div, ma l'immagine viene tagliata:

 <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">

C'è un modo per mostrare l'immagine di sfondo senza tagliarla?

Puoi farlo con la background-sizeproprietà, che è ora supportata dalla maggior parte dei browser .

Per ridimensionare l'immagine di sfondo per adattarla al div:

background-size: contain;

Per ridimensionare l'immagine di sfondo per coprire l'intero div:

background-size: cover;

JS Esempio di violino

Esiste anche un filtro per il supporto di IE 5.5+ e prefissi dei fornitori per alcuni browser meno recenti .

Se ciò di cui hai bisogno è che l'immagine abbia le stesse dimensioni del div, penso che questa sia la soluzione più elegante:

background-size: 100% 100%;

In caso contrario, la risposta di @grc è la più appropriata.

Fonte: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Puoi usare questi attributi:

background-size: contain;
background-repeat: no-repeat;

e il tuo codice è quindi così:

 <div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">

usi anche questo:

background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%; 

Non conosco i tuoi valori div, ma supponiamo che tu li abbia.

height: auto;
max-width: 600px;

Ancora una volta, quelli sono solo numeri casuali. Potrebbe essere difficile creare l'immagine di sfondo (se lo si desidera) con una larghezza fissa per il div, quindi utilizzare meglio la larghezza massima. E in realtà non è complicato riempire un div con un'immagine di sfondo, assicurati solo di modellare l'elemento genitore nel modo giusto, quindi l'immagine ha un posto in cui può andare.

Chris