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?


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,

Odpowiedzi:



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


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

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


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
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.