Hintergrundbild an div anpassen

Ich habe ein Hintergrundbild in der folgenden Abteilung, aber das Bild wird abgeschnitten:

 <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">

Gibt es eine Möglichkeit, das Hintergrundbild anzuzeigen, ohne es abzuschneiden?

Sie können dies mit der background-sizeEigenschaft erreichen, die jetzt von den meisten Browsern unterstützt wird .

So skalieren Sie das Hintergrundbild so, dass es in das div passt:

background-size: contain;

So skalieren Sie das Hintergrundbild, um das gesamte Div abzudecken:

background-size: cover;

JSFiddle-Beispiel

Es gibt auch einen Filter für die Unterstützung von IE 5.5+ sowie Herstellerpräfixe für einige ältere Browser .

Wenn Sie das Bild benötigen, um die gleichen Abmessungen des Div zu haben, ist dies meiner Meinung nach die eleganteste Lösung:

background-size: 100% 100%;

Wenn nicht, ist die Antwort von @grc die am besten geeignete.

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

Sie können diese Attribute verwenden:

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

und Ihr Code ist dann so:

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

Sie verwenden auch diese:

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

Ich kenne Ihre Div-Werte nicht, aber nehmen wir an, Sie haben diese.

height: auto;
max-width: 600px;

Auch dies sind nur Zufallszahlen. Es könnte ziemlich schwierig sein, das Hintergrundbild (wenn Sie möchten) mit einer festen Breite für das Div zu erstellen. Verwenden Sie daher besser die maximale Breite. Und tatsächlich ist es nicht kompliziert, ein Div mit einem Hintergrundbild zu füllen. Stellen Sie einfach sicher, dass Sie das übergeordnete Element richtig formatieren, damit das Bild einen Platz hat, an den es gehen kann.

Chris