Incorpora l'immagine in un elemento <button>

Sto cercando di visualizzare un'immagine png su un <button>elemento in HTML. Il pulsante ha le stesse dimensioni dell'immagine e l'immagine viene mostrata, ma per qualche motivo non al centro, quindi è impossibile vedere tutto. In altre parole, sembra che l'angolo in alto a destra dell'immagine sia situato al centro del pulsante e non nell'angolo in alto a destra del pulsante.

Questo è il codice HTML:

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

Aggiornamento:
ciò che effettivamente accade, penso, è un problema di margine. Ottengo un margine di due pixel, quindi l'immagine di sfondo esce dal pulsante. Il pulsante e l'immagine sono le stesse dimensioni, che è solo 20px, quindi è molto inferme ... ho provato margin:0, padding:0ma non è servito ...

È possibile utilizzare l'immagine del tipo di input.

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

Funziona come un pulsante e può avere i gestori di eventi collegati ad esso.

In alternativa, puoi usare css per modellare il tuo pulsante con un'immagine di sfondo e impostare i bordi, i margini e simili in modo appropriato.

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

Se l'immagine è un pezzo di dati semantici (come un'immagine del profilo, ad esempio), usa un <img>elemento all'interno del tuo <button>e usa CSS per ridimensionare <img>. Se l'immagine è solo un modo per rendere visivamente piacevole un pulsante, usa CSS background-imageper dare uno stile al <button>(e non usare un <img>).

Demo: 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;
}

Produzione:

prova questo

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

Il modo più semplice per inserire un'immagine in un pulsante:

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

Ciò ridimensionerà automaticamente il pulsante in base alle dimensioni dell'immagine.

Perché non usi un'immagine con un onclick attributo?

Per esempio:

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

Aggiungi una nuova cartella con il nome delle immagini nel tuo progetto. Inserisci alcune immagini nella cartella Immagini. Quindi funzionerà bene.

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

Prova come questo formato e usa l'attributo "larghezza" per gestire la dimensione dell'immagine, è semplice. JavaScript può essere implementato anche in element.

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

I pulsanti non supportano direttamente le immagini. Inoltre il modo in cui stai facendo è per i collegamenti ()

Le immagini vengono aggiunte sui pulsanti utilizzando la proprietà BACKGROUND-IMAGE con stile

puoi anche specificare le ripetizioni e altre proprietà usando il tag

Ad esempio: un'immagine di base aggiunta a un pulsante avrebbe questo codice:

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

Pace