VPF::Растянуть картинку на книпке - Форум программистов

butionok

Дата 23.3.2007, 02:11 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 125
Регистрация: 19.1.2005

Репутация: нет
Всего: 3

Привет всем!

Вот такая проблема: как сделать так, чтобы картинка уменьшалась и полностью помещалась на кнопке если кнопка меньше чем картинка? А то получается так, что на кнопке видна только часть картинки.

Код


<button style='width:19px;background-image:url("ICON/up_black.gif")'></button>

А если сделать так:

Код


<button><img src='ICON/up_black.gif' style='width:19px'></button>

то кнопка по высоте больше чем картинка и картинка не центрированна по вертикали!! Может как-то можно отцентрировать по вертикали?
А вот по ширине кнопка чуть больше картинки и по горизонтали картинка отцентрирована.

--------------------

Ненавижу убогую Оперу.

Mymik

Дата 23.3.2007, 12:43 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 7
Всего: 78

отцентрировать background можно с помощью

Код


background-position:center center

Что касается размера background'а, то изменять его размер нельзя. Можно только лишь объектом Image (из JS) или <img>. (может быть что-то еще есть, но в голову не приходит).

Добавлено @ 12:46
butionok, Да, но в твоем случаи лучше написать не background-position, а сразу в одно свойство background засунуть.

Код


background:url("ICON/up_black.gif") center center;

P.S. кстати в background надо указывать сразу два свойства позиционирования изображения background'а иначе в Opera 8.51 происходит глюк и background не загружается (пару дней назад с такой глупостью столкнулся).

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

butionok

Дата 23.3.2007, 13:33 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 125
Регистрация: 19.1.2005

Репутация: нет
Всего: 3

Mymik,

Ок, c background-image понятно. Тут явно какая-то недоработка, скорее всего связанная с отрисовкой <button>.

Но вопрос, почему если явно не указывать размеры кнопки в случае:

Код


 <button><img src='ICON/up_black.gif' style='width:19px'></button>

ширина кнопки нормально расчитывается, а высота нет? Картинка всегда вверху, а внизу пустое пространство.

Добавлено @ 13:38
Даже если я укажу высоту картинки

Код


<button><img src='ICON/up_black.gif' style='width:19px;height:19px'></button>

Всё равно кнопка получается прямоугольной с пустым пространством внизу

--------------------

Ненавижу убогую Оперу.

Mymik

Дата 23.3.2007, 14:16 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 7
Всего: 78

Эх, и где вы отыскали элемент button... не понимаю, никогда о нем даже и не слышал, тут полез в google там написали что это генерация кнопки и внутрь вставляется контент... Т.е.

Код


<button><img src='ICON/up_black.gif' style='width:19px;height:19px'></button>

Это кнопка в которую вставляется изображение
А вот если ты напишешь по человечески (кстати, некоторые источники рекомендуют именно там писать)

Код


<input type="image" src="ICON/up_black.gif" alt="Go back" />

То у тебя уже изображение станет кнопкой. И по идеи все твои проблемы исчезнут (если я их правильно понимаю...)

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

butionok

Дата 23.3.2007, 14:36 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 125
Регистрация: 19.1.2005

Репутация: нет
Всего: 3

Mymik,

Дело в том, что своим видом стандартная кнопка меня вполне устраивает smile

. А вот input нет! К нему надо прописывать фон и рамки чтобы это выглядело как объёмная кнопка. Но я проблему решил. Оказывается проблемма в innerHTML.
Генерировал таблицу:

Код


......
var td = tr.insertCell(0);
s="<button><img src='ICON/up_black.gif' style='width:19px'></button>";
td.innerHTML=s;

Кнопка получается кривой: изображение вверху, внизу пустое пространство.
А вот если сделать так:

Код


but=document.createElement("button");
var img=document.createElement("img");
img.src='ICON/up_black.gif';
img.style.width="19px";
img.style.height="19px";
td.appendChild(but);
but.appendChild(img);

То кнопка получается хорошей smile

Так что глюк в innerHTML.

Это сообщение отредактировал(а) butionok - 23.3.2007, 14:38

--------------------

Ненавижу убогую Оперу.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »