Hintergrundbild an div anpassen

331

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?

html css background-image

— Rajeev
quelle

Ist das Bild größer als das Div?

— Grc

1

Ja, das Bild ist größer als das Div

— Rajeev

1

Hintergrundbild: URL (/media/img_1_bg.jpg); Hintergrundgröße: enthalten; Hintergrundwiederholung: keine Wiederholung;

— Waruna Manjula

668

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 .

— grc
quelle

117

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

— Sertage
quelle

Schließlich fand ich die Lösung, um ganze Div mit dem Hintergrund zu passen. Vielen Dank!

— Kamil Rykowski

5

aber dies würde das Bild dehnen ... gibt es eine Möglichkeit, das Hintergrundbild anzupassen, ohne es zu dehnen?

— Junaid

1

Seitenverhältnis verloren jedoch.

— Lerner

@Learner Wenn Sie die Abmessungen eines Bildes ändern, ohne das Bild zuzuschneiden, geht das Seitenverhältnis in 99% der Fälle verloren. Es ist gesunder Menschenverstand.

— Vaibhav Vishal

11

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

— hojjat.mi
quelle

8

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

— Christian
quelle

Link zu einer hoch bewerteten Antwort, die ausführlicher über diese Lösung spricht: stackoverflow.com/questions/600743/… und zeigt Ihnen, wie Sie die berechnen padding-top.

— John Lee