it-swarm.com.ru

Вставить изображение в элемент <button>

Я пытаюсь отобразить изображение png на элементе <button> в HTML . Размер кнопки совпадает с размером изображения, и изображение отображается, но по какой-то причине не в центре - поэтому невозможно увидеть все это . Другими словами, кажется, что верхний правый угол изображения расположен в центре кнопки, а не в верхнем правом углу кнопки.

Это HTML-код:

<button id="close" class="closing" onClick="javascript:close_clip()"><img src="icons/close.png" /></button>

Обновление:
То, что на самом деле происходит, я думаю, является проблемой маржи. Я получаю двухпиксельное поле, поэтому фоновое изображение выходит за пределы кнопки. Кнопка и изображение имеют одинаковый размер, который составляет только 20px, поэтому он очень заметен ... Я пробовал margin:0, padding:0, но это не помогло ...

92
Amit Hagin

Вы можете использовать тип ввода изображения.

<input type="image" src="http://example.com/path/to/image.png" />

Он работает как кнопка и к нему могут быть прикреплены обработчики событий.

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

<button style="background: url(myimage.png)" ... />
128
Andrew Barber

Если изображение является частью семантических данных (например, изображение профиля), используйте элемент <img> внутри вашего <button> и используйте CSS для изменения размера <img>. Если изображение является просто способом сделать кнопку визуально приятной, используйте CSS background-image для стилизации <button> (и не используйте <img>).

Демо: http://jsfiddle.net/ThinkingStiff/V5Xqr/

HTML:

<button id="close-image"><img src="http://thinkingstiff.com/images/matt.jpg"></button>
<button id="close-CSS"></button>

CSS: 

button {
    display: inline-block;
    height: 134px;
    padding: 0;
    margin: 0;
    vertical-align: top;
    width: 104px;
}

#close-image img {
    display: block;
    height: 130px;  
    width: 100px;
}

#close-CSS {
    background-image: url( 'http://thinkingstiff.com/images/matt.jpg' );
    background-size: 100px 130px;
    height: 134px;  
    width: 104px;
}

Результат:

enter image description here

53
ThinkingStiff

попробуй это

   <input type="button" style="background-image:url('your_url')"/>
9
Chris P

Самый простой способ поместить изображение в кнопку:

<button onclick="myFunction()"><img src="your image name here.png"></button>

Это автоматически изменит размер кнопки до размера изображения.

3
Eli Davies

Почему вы не используете изображение с атрибутом onclick?

Например:

<script>
function myfunction() {
}
</script>
<img src='Myimg.jpg' onclick='myfunction()'>
0
SirFireball

Добавьте новую папку с именем Images в ваш проект. Поместите некоторые изображения в папку изображений. Тогда все будет работать нормально.

<input type="image" src="~/Images/Desert.jpg" alt="Submit" width="48" height="48">
0
Parameswaran