Резиновая картинки в шаблоне, как?! - Joomla 2.5: Шаблоны, разметка и макеты вывода

Нужна Ваша помощь, у меня не хватает опыта додумать.
Собственно как сделать резиновую картинку в определенном месте шаблона что б размер менялся в зависимости от экрана, но картинка с места никуда не девалась.

пробовал так: <div id="logo2"><img src="../images/logo2.jpg" width="100%"/></div>, наверняка я Неправильно написал эту строку в index? - так как никаких изменений не было...
пробовал и с процентами в CSS и "так и сяк", но кроме изменений картинки или места позиции ничего не происходило и картинка на других экранах смотрится огромной (у меня 1920x1080разрешение и делал для своего монитора, забыв обо всем и казалось, что все сделал, но когда через 2комп посмотрел сайт то ужаснулся(1024x768)). Картинок несколько, но если есть решение, то применю его к остальным. footer сделал резиновым с помощью процентов и все с ним норм.

Либо делаете картинку огромных размеров и на бекграунд, либо пи помощи js. Других вариантов вроде нет

Никак. При подобных условиях позиционировать блок можно только left, right, center. Или должен быть какой то фиксированный блок, к которому привязывать тянучку.

P.S. Резиновая верстка - вчерашний день. Осваивайте адаптивную.

Никак. При подобных условиях позиционировать блок можно только left, right, center. Или должен быть какой то фиксированный блок, к которому привязывать тянучку.

P.S. Резиновая верстка - вчерашний день. Осваивайте адаптивную.

Ну позиционировать блок с картинкой не вижу смысла ибо размер не будет меняться заданный. А вот что насчет фиксированного блока, как к нему привязать картинку-резинку?
Адаптированную буду осваивать, но только чуть позже.

Да тут наверно и это не поможет. Если картинка настолько большая, то попробуйте ее вставить в качестве background CSS для страницы. Отцентрируйте
50% - аналог center в данном случае. Картинка не будет растягиваться и деформироваться, но при меньших разрешениях будет скрываться за краями окна, оставаясь по центру монитора.

Гм. Вроде задача то тривиальная.
Всё, картинка будет автоматом масштабироваться под размер окна. Это работает только с img и не работает с css2 (в css3 можно задать масштабирование фона). Два минуса способа:
1. Нам бы нах не нужен лишний имедж в потоке контента. Оборачивать ноуиндексами тоже не совсем то, что хотелось бы.
2. Картинка будет обрываться снизу. Можно конечно добавить ещё и height:100% и будет стопроцентное заполнение всего окна. Но тогда фон должен быть такой, чтобы его можно было без зазрения совести искажать непропрорционально. Например какие-нить разводы а-ля заставка винды.
Вариант два, лишённый этих минусов: JS. http://srobbin.com/jquery-plugins/backstretch/ — использовал пару раз этот плагин. Впечатления положительные.

2. Картинка будет обрываться снизу.

3. Картинка будет деформироваться при разрешениях, отличных от собственного размера. Именно по этой причине я даже не предложил этот вариант. А плагин подобный использовать приходилось. Только из первого сообщения и куска кода с logo2.jpg вроде бы ТС не целиком фон пытается повесить, а именно какую то часть в верху страницы.

Да тут наверно и это не поможет. Если картинка настолько большая, то попробуйте ее вставить в качестве background CSS для страницы. Отцентрируйте

Код

background:url(../images/image.jpg) no-repeat 50% 0;

50% - аналог center в данном случае. Картинка не будет растягиваться и деформироваться, но при меньших разрешениях будет скрываться за краями окна, оставаясь по центру монитора.

картинка все равно большая получается (хоть и прицепилась хорошо) - на моем мониторе(1920x1080) отлично, а на (1024x768) уходит по футер и накрывается блоком, блок то могу и шире сделать или процентами, но вот что с картинкой еще можно сделать не знаю даже.. как вариант уменьшить картинку - но всё равно тогда будет уже не то, да и Неправильно.. а если сам блок в php сделать резиновым задав ему width="100%"? А хотя тоже не выйдет.. я в тупике.. 

Сама картинка не большая, вот ссылка http://www.veronirv.bget.ru
Изображение должно стоять ногами на футере, вверху там будет ещё логотип с именем ну и тд.. пока все что не нужно скрыл.

3. Картинка будет деформироваться при разрешениях, отличных от собственного размера. Именно по этой причине я даже не предложил этот вариант. А плагин подобный использовать приходилось. Только из первого сообщения и куска кода с logo2.jpg вроде бы ТС не целиком фон пытается повесить, а именно какую то часть в верху страницы.

Про деформацию картинки я написал. Говорю ж, способ вполне себе актуален для вот таких к примеру фонов
А вообще, если не JS, то медиа-кверисы решают.

картинка все равно большая получается (хоть и прицепилась хорошо) - на моем мониторе(1920x1080) отлично, а на (1024x768) уходит по футер и накрывается блоком, блок то могу и шире сделать или процентами, но вот что с картинкой еще можно сделать не знаю даже.. как вариант уменьшить картинку - но всё равно тогда будет уже не то, да и Неправильно.. а если сам блок в php сделать резиновым задав ему width="100%"? А хотя тоже не выйдет.. я в тупике.. 

Сама картинка не большая, вот ссылка http://www.veronirv.bget.ru
Изображение должно стоять ногами на футере, вверху там будет ещё логотип с именем ну и тд.. пока все что не нужно скрыл.

Попробуйте вариант с плагином по ссылке Shustry, может подойти. Хотя там человек - может кривое зеркало получиться.

Жень, видел картинку да? Там вообще не по ширине тянуть ее нужно, а по высоте

Попробуйте вариант с плагином по ссылке Shustry, может подойти. Хотя там человек - может кривое зеркало получиться.

Жень, видел картинку да? Там вообще не по ширине тянуть ее нужно, а по высоте

Не хотелось бы плагинами пользоваться ибо я все равно не пойму решение проблемы..  да и куда и как данный плагин устанавливать, он под 2.5joomla?!

Нет, это плагин JQuery. Подключается в шаблон при верстке.

больше ничего нельзя придумать?

Знаете, мы тут все такие придумщики... Вы задали вопрос, мы на него дали ответы. Придумывают стихи, а мы как то больше знаниями оперируем. С шириной картинки дело проще, ее можно растянуть на 100% и она растянется согласно ширины браузера. С высотой такое не пройдет. Можно конечно попробовать обернуть картинку в блок, задать ему ширину картинки, max-height:высота картинки px; и свойство overflow:hidden;position:relative; Затем для картинки указать max-width:100%; Но не ручаюсь, что этот вариант сработает.

Попробуйте вариант с плагином по ссылке Shustry, может подойти. Хотя там человек - может кривое зеркало получиться.

Жень, видел картинку да? Там вообще не по ширине тянуть ее нужно, а по высоте

Мужик с гитарой? Теперь видел . Вообще проще всё намного решается, учитывая, что высота картинки много больше ширины, а по бокам просто чёрная заливка.
Наслаждайтесь
Там, кстати, обёртка одна лишняя у картинки. Щас только дошло, навелосипедил. Ну это уже ТС как домашнее задание.

max-width тоже работает)

Мужик с гитарой? Теперь видел . Вообще проще всё намного решается, учитывая, что высота картинки много больше ширины, а по бокам просто чёрная заливка.
Наслаждайтесь
Там, кстати, обёртка одна лишняя у картинки. Щас только дошло, навелосипедил. Ну это уже ТС как домашнее задание.

ну положение и размер не тот, но это все можно поправить (в общем как вариант)... по мимо него еще есть изображения ведь, все остальное можно таким же способом? 

Что-то у меня не получается сделать точно так же. src= - это адрес к картинке? а в ксс что тогда писать?

Собственно как сделать резиновую картинку в определенном месте шаблона что б размер менялся в зависимости от экрана, но картинка с места никуда не девалась.

Может быть просто вот так?
img {
    max-width: 100%;
    height: auto;
}

Рисуете три картинки: левый край, центр, правый край. Края фиксированные, центр рипид.

mors, я ж даже пример сверстал вам. Решение полностью закрывает вопрос темы. Что такое src, как сделать побольше отступы и тому подобное — оффтоп.
aspidy, там не подойдёт этот способ. ТС фактически не нужна полная резина для картинки, а только по-высоте. По-бокам просто чёрный фон. Спозиционировали абсолютно в отдельном слое, выровняли по-центру. Всё.

mors, я ж даже пример сверстал вам. Решение полностью закрывает вопрос темы. Что такое src, как сделать побольше отступы и тому подобное — оффтоп.
aspidy, там не подойдёт этот способ. ТС фактически не нужна полная резина для картинки, а только по-высоте. По-бокам просто чёрный фон. Спозиционировали абсолютно в отдельном слое, выровняли по-центру. Всё.

Спасибо большое за такую подсказку! С кодом разобрался, осталось применить в правильном направлении все. Балалаишника можешь удалить)

Пожалуйста. Удалил.

У меня не большая проблема. Модули выводятся под контентом, а если я меняю позицию у контенка "абсолют" на другую, то модули встают по верх контента, но тогда логотипы перестают резиниться и стоять на своем законном месте... пробовал в ксс для модулей выставлять "абсолютную" позиции, но ничего.

Это как у вас получилось вывести два раза body? Причёт первый раз в блоке head. Нужно было от моего примера отталкиваться. Точно не помню, там примерно так было:
Т.е. вместо «тут весь сайт» нужно было вставить весь сайт: компонент и все позиции модулей. Смысл в том, что эти два блока наслаиваются один на другой. Один служит подложкой, а другой контейнером для всех-всех элементов сайта, кроме фоновой картинки с гитаристом, которую мы поместили в первый.

да я пытался сделать модуль по верх)

Вот ваш пример (он и стоит):и куда писать позиции для модулей, что бы они были по верх контента не могу сообразить...

два сообщения написал случайно

Это стопудово не мой пример
Надо как-то так, если его поправить:

Он был твой, но после моей обработки он стал неузнаваем
Ясно, пошёл взрывать сайт. Спасибо!)

как шаблон к пункту меню прикрепить? что, где указывать, какой тип пункта меню? что-то не могу понять.. стиль шаблона указал (новый шаблон) и все...



зы: не по теме вопрос, что б новую тему не создать.