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?
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;
Istnieje również filtr dla obsługi IE 5.5 + , a także prefiksy dostawcy dla niektórych starszych przeglądarek .
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
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
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.
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