Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Растянуть картинку на книпке

Автор: butionok 23.3.2007, 02:11

Привет всем!

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

Код


<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

отцентрировать 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 не загружается (пару дней назад с такой глупостью столкнулся).

Автор: butionok 23.3.2007, 13:33

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

Эх, и где вы отыскали элемент 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" />

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

Автор: butionok 23.3.2007, 14:36

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.