it-swarm.com.de

Hintergrundbild an div anpassen

Ich habe ein Hintergrundbild im folgenden div, 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?

263
Rajeev

Dies erreichen Sie mit der background-size - Eigenschaft, die jetzt von den meisten Browsern unterstützt wird.

So skalieren Sie das Hintergrundbild für das div:

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 IE 5.5+ Support sowie vendor Präfixe für einige ältere Browser .

547
grc

Wenn Sie benötigen, dass das Bild die gleichen Abmessungen des div hat, denke ich, dass dies die eleganteste Lösung ist:

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

82
Sertage

du verwendest auch das:

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 das sind nur Zufallszahlen ... Es könnte ziemlich schwierig sein, das Hintergrundbild (wenn Sie möchten) mit einer festen Breite für das div zu versehen, also verwenden Sie besser max-width. Und eigentlich ist es nicht kompliziert, ein div mit einem Hintergrundbild zu füllen. Stellen Sie nur sicher, dass Sie das übergeordnete Element richtig formatieren, damit das Bild einen Platz hat, in den es gehen kann.

Chris 

8
Christian

Sie können diese Attribute verwenden:

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

und du codierst dann so:

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