Dopasuj obraz tła do div

334

Mam obraz tła w poniższym div, ale obraz zostaje obcięty:

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

Czy istnieje sposób na pokazanie obrazu tła bez jego odcinania?

html css background-image Rajeev
źródło

Czy obraz jest większy niż div?

grc,

1

tak, obraz jest większy niż div

Rajeev

1

background-image: url (/media/img_1_bg.jpg); rozmiar tła: zawiera; powtarzanie w tle: brak powtarzania;

Waruna Manjula,

671

Możesz to osiągnąć za pomocą background-sizewłaściwości, która jest teraz obsługiwana przez większość przeglądarek .

Aby przeskalować obraz tła, aby zmieścił się w div:

background-size: contain;

Aby przeskalować obraz tła, aby objąć cały div:

background-size: cover;

Przykład JSFiddle

Istnieje również filtr do obsługi IE 5.5+ , a także prefiksy dostawców dla niektórych starszych przeglądarek .

grc
źródło

119

Jeśli potrzebujesz obrazu, który ma te same wymiary div, myślę, że jest to najbardziej eleganckie rozwiązanie:

background-size: 100% 100%;

Jeśli nie, odpowiedź @grc jest najbardziej odpowiednia.

Źródło: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Sertage
źródło

W końcu znalazłem rozwiązanie pasujące do całego diva z tłem. Dziękuję Ci!

Kamil Rykowski

5

ale to rozciągałoby obraz ... czy istnieje sposób, aby dopasować obraz tła bez rozciągania go?

Junaid

1

Utracono jednak proporcje obrazu.

Uczeń

@ Uczeń W przypadku zmiany wymiarów obrazu bez przycinania obrazu współczynnik proporcji zostanie utracony w 99% przypadków. To zdrowy rozsądek.

Vaibhav Vishal

11

Możesz użyć tych atrybutów:

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

i wtedy kod jest taki:

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

hojjat.mi
źródło

8

korzystasz również z tego:

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

Nie znam twoich wartości div, ale załóżmy, że je masz.

height: auto;
max-width: 600px;

Ponownie, są to po prostu liczby losowe. Wykonanie obrazu w tle (jeśli chcesz) może być trudne ze stałą szerokością dla div, więc lepiej użyć max-width. I tak naprawdę wypełnienie div obrazem tła nie jest skomplikowane, po prostu upewnij się, że odpowiednio nadałeś styl elementowi nadrzędnemu, aby na obrazie było miejsce, w które mógłby wejść.

Chris

chrześcijanin
źródło

Link do wysoko głosowanej odpowiedzi, która bardziej szczegółowo mówi o tym rozwiązaniu: stackoverflow.com/questions/600743/... i pokazuje, jak obliczyć padding-top.

John Lee

Dopasuj obraz tła do div

Odpowiedzi: