Incorporer l'image dans un élément <button>

J'essaye d'afficher une image png sur un <button>élément en HTML. Le bouton est de la même taille que l'image et l'image est affichée mais pour une raison quelconque, pas au centre - il est donc impossible de tout voir. En d'autres termes, il semble que le coin supérieur droit de l'image se trouve au centre du bouton et non dans le coin supérieur droit du bouton.

Voici le code HTML:

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

Mise à jour:
Ce qui se passe réellement, je pense, est un problème de marge. J'obtiens une marge de deux pixels, donc l'image d'arrière-plan sort du bouton. Le bouton et l'image sont de la même taille, qui est seulement 20px, il est donc très ... J'ai essayé noticable margin:0, padding:0mais il n'a pas aidé ...

Vous pouvez utiliser une image de type d'entrée.

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

Il fonctionne comme un bouton et peut être associé aux gestionnaires d'événements.

Vous pouvez également utiliser css pour styliser votre bouton avec une image d'arrière-plan et définir les bordures, les marges et autres de manière appropriée.

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

Si l'image est une donnée sémantique (comme une image de profil, par exemple), utilisez un <img>élément à l'intérieur de votre <button>et utilisez CSS pour redimensionner le fichier <img>. Si l'image n'est qu'un moyen de rendre un bouton visuellement agréable, utilisez CSS background-imagepour styliser le <button>(et n'utilisez pas de <img>).

Démo: 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;
}

Production:

essaye ça

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

Le moyen le plus simple de mettre une image dans un bouton:

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

Cela redimensionnera automatiquement le bouton à la taille de l'image.

Pourquoi n'utilisez-vous pas une image avec un onclickattribut?

Par exemple:

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

Ajoutez un nouveau dossier avec le nom des images dans votre projet. Mettez quelques images dans le dossier Images. Ensuite, cela fonctionnera très bien.

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

Essayez comme ce format et utilisez l'attribut "width" pour gérer la taille de l'image, c'est simple. JavaScript peut également être implémenté dans l'élément.

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

Les boutons ne prennent pas directement en charge les images. De plus, la façon dont vous faites est pour les liens ()

Les images sont ajoutées sur les boutons à l'aide de la propriété BACKGROUND-IMAGE avec style

vous pouvez également spécifier les répétitions et autres propriétés à l'aide de la balise

Par exemple: une image de base ajoutée à un bouton aurait ce code:

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

Paix