Dopasuj obraz tła do div

Mam obrazek tła w poniższym div, ale obrazek zostaje odcię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, aby pokazać obraz tła bez odcinania go?

Author: Purag, 2011-11-20
Source

4 answers

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

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

background-size: contain;

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

background-size: cover;

Przykład JSFiddle

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

 519
Author: grc,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:02:45

Jeśli potrzebujesz, aby obraz miał 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

 69
Author: Sertage,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-21 08:42:14

Używasz również tego: 

background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%;
Nie znam twoich wartości, ale załóżmy, że je masz. 
height: auto;
max-width: 600px;
Znowu, to są tylko losowe liczby. Może to być dość trudne, aby obraz tła (jeśli chcesz) o stałej szerokości dla div, więc lepiej użyć max-width. W rzeczywistości wypełnienie elementu div obrazem tła nie jest skomplikowane, po prostu upewnij się, że stylizujesz element nadrzędny we właściwy sposób, aby obraz miał miejsce, w którym może się znaleźć.

Chris

 6
Author: Christian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-24 15:58:18

To albo zmieniasz szerokość i wysokość div lub ustawiasz rozmiar tła.

 -8
Author: Teffi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-11-20 08:11:05