Incrustar imagen en un elemento <button>

Estoy tratando de mostrar una imagen png en un <button>elemento en HTML. El botón tiene el mismo tamaño que la imagen, y la imagen se muestra pero, por alguna razón, no está en el centro, por lo que es imposible verlo todo. En otras palabras, parece que la esquina superior derecha de la imagen se encuentra en el centro del botón y no en la esquina superior derecha del botón.

Este es el código HTML:

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

Actualización:
lo que realmente sucede, creo, es un problema de margen. Obtengo un margen de dos píxeles, por lo que la imagen de fondo sale del botón. El botón y la imagen son del mismo tamaño, que es única 20px, por lo que es muy notable ... He intentado margin:0, padding:0pero no sirvió de nada ...

Podría usar la imagen de tipo de entrada.

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

Funciona como un botón y puede tener los controladores de eventos adjuntos.

Alternativamente, puede usar css para diseñar su botón con una imagen de fondo y establecer los bordes, márgenes y similares de manera adecuada.

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

Si la imagen es una pieza de datos semánticos (como una imagen de perfil, por ejemplo), use un <img>elemento dentro de su <button>y use CSS para cambiar el tamaño <img>. Si la imagen es solo una forma de hacer que un botón sea visualmente agradable, use CSS background-imagepara diseñar el <button>(y no use un <img>).

Demostración: 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;
}

Salida:

prueba esto

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

La forma más sencilla de poner una imagen en un botón:

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

Esto cambiará automáticamente el tamaño del botón al tamaño de la imagen.

¿Por qué no usas una imagen con un onclickatributo?

Por ejemplo:

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

Agregue una nueva carpeta con el nombre de Imágenes en su proyecto. Ponga algunas imágenes en la carpeta Imágenes. Entonces funcionará bien.

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

Pruebe este formato y use el atributo "ancho" para administrar el tamaño de la imagen, es simple. JavaScript también se puede implementar en el elemento.

<button><img src=""></button>

Los botones no admiten imágenes directamente. Además, la forma en que lo haces es para enlaces ()

Las imágenes se agregan sobre botones que usan la propiedad BACKGROUND-IMAGE con estilo

También puede especificar las repeticiones y otras propiedades usando la etiqueta

Por ejemplo: una imagen básica agregada a un botón tendría este código:

    <button style="background-image:url(myImage.png)">

Paz