Как растянуть картинку по горизонтали и вертикали

Ni_Splinter · 24.02.2011, 20:12

2000 точно должно хватить

74ivan74 · 28.02.2011, 23:16

Цитата:

.form { padding-bottom: 25px; width: 100%; height: 27px; background: url(./images/form.jpg) no-repeat; }

Как эту картинку поставить в центре страницы, сейчас она слева, в коде саймой страницы отцентровать div align="center" не получилось.
Спасибо!

Ni_Splinter · 01.03.2011, 01:44

background: url(./images/form.jpg) center top no-repeat;

Виталий Смирнов · 13.03.2011, 22:56

Растягивайте как хотите))

Но если у человека разрешение огромное, то у него картинка будет обрезана по краям... это легко исправить) Просто в фотошопе края рисунка затемняем тенью, или свечением - зависит от цветовой гаммы сайта, и помимо указания фонового рисунка указывайте цвет фона для тега <body> Тогда картинка будет плавно переходить в цвет.

74ivan74 · 13.03.2011, 23:00

Совсем меня это интернет уже испортил, тему создал, помню, что, что-то важное, а для чего и какого сайта, что за картинка, уже не помню (
Девичья память

Neznajka · 01.04.2011, 12:44

Приветствую всех!
А у меня обратная ситуация - не могу корректно сжать картинку, хотя перепробовал практически все приведённые здесь советы. Причём в одном шаблоне добился-таки желаемого результата путём правки css-файла после "подсмотра" кода в FireBug'е. А в другом шаблоне - ничего не помогает. Даже и FireBug уже не помогает, ибо он показывает всё правильно, а в браузере видится всё несколько иначе. При необходимости могу приложить оба шаблона, но сначала попробую изложить детали без чрезмерных "дебрей".
Суть проблемы в том, что после смены шаблона сайта его заголовочная jpg-картинка стала масштабироваться несколько иначе, чем в предыдущем шаблоне. Понял, что надо подправить CSS. Подправил - удалось выставить нужный мне размер соответствующего div'а. Выглядит в браузере - всё, как надо. Но рано обрадовался. Обнаружилось, что при попытке уменьшения масштаба страницы (обычно, Ctrl+Grey-) сам div уменьшается в несколько меньшей степени, чем заполняющая его jpg-картинка, и из-за этого эта картинка дополняется слева своим же фрагментом. А в предыдущем шаблоне - всё масштабировалось пропорционально.
Подсмотрел в предыдущем шаблоне css-форматирование аналогичного div'а с картинкой и увидел, что там указано

Код:

background-repeat: no-repeat;

а в текущем шаблоне - стоит

Код:

background-repeat: repeat-x;

Тогда я снова подправил соответствующий фрагмент css-файла вот таким образом:

Код:

#ic_header-img { 
	position: relative;
	background-repeat: no-repeat;
	background-position: right;
	height: 479px;

Никакой реакции, всё как прежде - масштабируется с дополнением слева. Тогда попробовал ещё 3-ю строчку поменять на

Код:

background-position: center center;

хоть понимаю, что эта команда - немного из другой оперы, но - утопающий хватается за соломинку. Уже как только не извращался - даже указывать min-width пробовал - всё равно никакой реакции, всё масштабируется по-прежнему.
А как всё-таки заставить картинку масштабироваться пропорционально с её div'ом? Ведь по сравнению с предыдущим шаблоном осталось лишь одно отличие - в предыдущем было указано

Код:

position: absolute;

- но для текущего шаблона это не применимо: пробовал, - тогда картинка вообще не отображается. В справочниках по CSS не нашёл ничего более подходящего, чем уже проверенные мной команды.
Подскажите, какая ещё css-команда может согласовать масштабирование контейнера и его картинки без её дополнений справа или слева?

vladendark · 01.04.2011, 16:41

полный код покажите

Neznajka · 01.04.2011, 21:36

To vladendark:
Благодарю Вас за участие. Не знаю, как лучше показать полный код, поэтому прилагаю три файла:
1) архив с оригинальным шаблоном;
2) архив с переделанным мной шаблоном: я попытался его переделать под увеличенный размер заглавной картинки (она - случайным образом меняется из нескольких вариантов при каждом обновлении страницы, это и привлекло меня в данном шаблоне);
3) полный код главной страницы, сгенерированной из-под моего переделанного шаблона - в принципе, если Вы непосредственнов нём подскажите мне необходимые правки, то я уже, думаю, самостоятельно смогу найти и подправить соответствующие строчки кода шаблона.
Для ускорения рассмотрения - привожу проделанные мной исправления:
1) в файле [шаблон]\header\settings.php убрал 5 абзацев, оветственных за форматирование пяти фоновых картинок, удалённых мной из шаблона (думаю, это отношения к проблеме не имеет);
2) в 15-й строке файла [шаблон]\css\ic_template.css заменил height: 175px; на height: 479px; - чтоб подогнать под размер моих, а не оригинальных шаблонных картинок; думаю, что это также не влияет на описываемую проблему;
3) в файле [шаблон]\index.php закомментировал 39-ю строку

Код:

$ic_header = "#FFF url($headerImg) repeat-x $headerAlign top";

, а вместо неё добавил 40-ю:

Код:

$ic_header = "#FFF url($headerImg) no-repeat center center";

, поскольку дальше эта переменная используется в 80-й строке для форматирования заголовочного контейнера с нужной мне картинкой:

Код:

background: <?php echo $ic_header; ?>;

- благодаря этому мне удалось добиться того, что картинка перестала дополняться своими фрагментами слева(справа). Теперь осталось только заставить её полностью заполнять еёшный div при уменьшении масштаба страницы - вот с этим у меня трудности. Помогите, пожалуйста.

Neznajka · 01.04.2011, 21:45

Сорри, файлы забыл приложить:

vladendark · 02.04.2011, 12:00

фоновые изобрвжения не тянутся.
Да и вообще картинки лучше не тянуть

изменения в index.html и ic_templ.css
http://web-silver.ru/forum/attachmen...1&d=1301731175

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Нужно растянуть фоновую картинку кнопки	kpripper	HTML, CSS, JavaScript	2	26.07.2011 19:01
Выравнивание таблицы по вертикали	loop1	HTML, CSS, JavaScript	6	15.02.2007 14:06
Растянуть вложенную таблицу по вертикали	Някрамант	HTML, CSS, JavaScript	2	16.08.2006 00:59
img в div выравнивание по вертикали	rubanok	HTML, CSS, JavaScript	5	22.06.2006 19:41
Как по вертикали растянуть!	kors@r	Зал дебютантов	13	26.04.2004 20:06

24.02.2011, 20:12	#11
Ni_Splinter	2000 точно должно хватить

01.03.2011, 01:44	#13
Ni_Splinter	background: url(./images/form.jpg) center top no-repeat;

13.03.2011, 22:56	#14
Виталий Смирнов	Растягивайте как хотите)) Но если у человека разрешение огромное, то у него картинка будет обрезана по краям... это легко исправить) Просто в фотошопе края рисунка затемняем тенью, или свечением - зависит от цветовой гаммы сайта, и помимо указания фонового рисунка указывайте цвет фона для тега <body> Тогда картинка будет плавно переходить в цвет.

13.03.2011, 23:00	#15
74ivan74	Совсем меня это интернет уже испортил, тему создал, помню, что, что-то важное, а для чего и какого сайта, что за картинка, уже не помню ( Девичья память

01.04.2011, 12:44	#16
Neznajka	Приветствую всех! А у меня обратная ситуация - не могу корректно сжать картинку, хотя перепробовал практически все приведённые здесь советы. Причём в одном шаблоне добился-таки желаемого результата путём правки css-файла после "подсмотра" кода в FireBug'е. А в другом шаблоне - ничего не помогает. Даже и FireBug уже не помогает, ибо он показывает всё правильно, а в браузере видится всё несколько иначе. При необходимости могу приложить оба шаблона, но сначала попробую изложить детали без чрезмерных "дебрей". Суть проблемы в том, что после смены шаблона сайта его заголовочная jpg-картинка стала масштабироваться несколько иначе, чем в предыдущем шаблоне. Понял, что надо подправить CSS. Подправил - удалось выставить нужный мне размер соответствующего div'а. Выглядит в браузере - всё, как надо. Но рано обрадовался. Обнаружилось, что при попытке уменьшения масштаба страницы (обычно, Ctrl+Grey-) сам div уменьшается в несколько меньшей степени, чем заполняющая его jpg-картинка, и из-за этого эта картинка дополняется слева своим же фрагментом. А в предыдущем шаблоне - всё масштабировалось пропорционально. Подсмотрел в предыдущем шаблоне css-форматирование аналогичного div'а с картинкой и увидел, что там указано Код: background-repeat: no-repeat; а в текущем шаблоне - стоит Код: background-repeat: repeat-x; Тогда я снова подправил соответствующий фрагмент css-файла вот таким образом: Код: #ic_header-img { position: relative; background-repeat: no-repeat; background-position: right; height: 479px; Никакой реакции, всё как прежде - масштабируется с дополнением слева. Тогда попробовал ещё 3-ю строчку поменять на Код: background-position: center center; хоть понимаю, что эта команда - немного из другой оперы, но - утопающий хватается за соломинку. Уже как только не извращался - даже указывать min-width пробовал - всё равно никакой реакции, всё масштабируется по-прежнему. А как всё-таки заставить картинку масштабироваться пропорционально с её div'ом? Ведь по сравнению с предыдущим шаблоном осталось лишь одно отличие - в предыдущем было указано Код: position: absolute; - но для текущего шаблона это не применимо: пробовал, - тогда картинка вообще не отображается. В справочниках по CSS не нашёл ничего более подходящего, чем уже проверенные мной команды. Подскажите, какая ещё css-команда может согласовать масштабирование контейнера и его картинки без её дополнений справа или слева?

01.04.2011, 16:41	#17
vladendark	полный код покажите

01.04.2011, 21:36	#18
Neznajka	To vladendark: Благодарю Вас за участие. Не знаю, как лучше показать полный код, поэтому прилагаю три файла: 1) архив с оригинальным шаблоном; 2) архив с переделанным мной шаблоном: я попытался его переделать под увеличенный размер заглавной картинки (она - случайным образом меняется из нескольких вариантов при каждом обновлении страницы, это и привлекло меня в данном шаблоне); 3) полный код главной страницы, сгенерированной из-под моего переделанного шаблона - в принципе, если Вы непосредственнов нём подскажите мне необходимые правки, то я уже, думаю, самостоятельно смогу найти и подправить соответствующие строчки кода шаблона. Для ускорения рассмотрения - привожу проделанные мной исправления: 1) в файле [шаблон]\header\settings.php убрал 5 абзацев, оветственных за форматирование пяти фоновых картинок, удалённых мной из шаблона (думаю, это отношения к проблеме не имеет); 2) в 15-й строке файла [шаблон]\css\ic_template.css заменил height: 175px; на height: 479px; - чтоб подогнать под размер моих, а не оригинальных шаблонных картинок; думаю, что это также не влияет на описываемую проблему; 3) в файле [шаблон]\index.php закомментировал 39-ю строку Код: $ic_header = "#FFF url($headerImg) repeat-x $headerAlign top"; , а вместо неё добавил 40-ю: Код: $ic_header = "#FFF url($headerImg) no-repeat center center"; , поскольку дальше эта переменная используется в 80-й строке для форматирования заголовочного контейнера с нужной мне картинкой: Код: background: <?php echo $ic_header; ?>; - благодаря этому мне удалось добиться того, что картинка перестала дополняться своими фрагментами слева(справа). Теперь осталось только заставить её полностью заполнять еёшный div при уменьшении масштаба страницы - вот с этим у меня трудности. Помогите, пожалуйста.