Bild in ein <button> -Element einbetten

Ich versuche, ein PNG-Bild auf einem <button>Element in HTML anzuzeigen . Die Schaltfläche hat die gleiche Größe wie das Bild und das Bild wird angezeigt, jedoch aus irgendeinem Grund nicht in der Mitte. Daher ist es unmöglich, alles zu sehen. Mit anderen Worten, die obere rechte Ecke des Bildes befindet sich anscheinend in der Mitte der Schaltfläche und nicht in der oberen rechten Ecke der Schaltfläche.

Dies ist der HTML-Code:

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

Update:
Was tatsächlich passiert, denke ich, ist ein Randproblem. Ich erhalte einen Rand von zwei Pixeln, sodass das Hintergrundbild nicht mehr auf der Schaltfläche angezeigt wird. Die Schaltfläche und das Bild die gleiche Größe haben , die nur ist 20px, so ist es sehr auffällig ist ... Ich habe versucht margin:0, padding:0aber es hat nicht geholfen ...

Sie können ein Bild vom Eingabetyp verwenden.

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

Es funktioniert als Schaltfläche und kann mit den Ereignishandlern verknüpft sein.

Alternativ können Sie CSS verwenden, um Ihre Schaltfläche mit einem Hintergrundbild zu gestalten und die Ränder, Ränder und dergleichen entsprechend festzulegen.

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

Wenn es sich bei dem Bild um semantische Daten handelt (z. B. ein Profilbild), verwenden Sie ein <img>Element in Ihrem <button>und verwenden Sie CSS, um die Größe des Bilds zu ändern <img>. Wenn das Bild ist nur eine Möglichkeit , eine Taste optisch ansprechend, verwenden CSS zu machen , background-imageum Stil der <button>(und nicht ein verwenden <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;
}

Ausgabe:

Versuche dies

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

Der einfachste Weg, ein Bild in eine Schaltfläche einzufügen:

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

Dadurch wird die Größe der Schaltfläche automatisch auf die Größe des Bildes angepasst.

Warum verwenden Sie kein Bild mit einem onclickAttribut?

Beispielsweise:

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

Fügen Sie Ihrem Projekt einen neuen Ordner mit dem Namen Images hinzu. Legen Sie einige Bilder in den Ordner "Bilder". Dann wird es gut funktionieren.

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

Versuchen Sie es wie in diesem Format und verwenden Sie das Attribut "width", um die Bildgröße zu verwalten. Es ist ganz einfach. JavaScript kann auch in element implementiert werden.

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

Schaltflächen unterstützen Bilder nicht direkt. Darüber hinaus ist die Art und Weise, wie Sie tun, für Links ()

Bilder werden mithilfe der Eigenschaft BACKGROUND-IMAGE stilvoll über Schaltflächen hinzugefügt

Sie können die Wiederholungen und andere Eigenschaften auch mithilfe des Tags angeben

Beispiel: Ein zu einer Schaltfläche hinzugefügtes Basisbild hätte den folgenden Code:

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

Frieden