it-swarm.com.de

Bild in ein <button> -Element einbetten

Ich versuche, ein png-Bild auf einem <button>-Element in HTML anzuzeigen. Die Schaltfläche hat dieselbe Größe wie das Bild, und das Bild wird angezeigt, aber aus irgendeinem Grund nicht in der Mitte - daher ist es unmöglich, alles zu sehen Mit anderen Worten scheint es, als befände sich die obere rechte Ecke des Bildes in der Mitte der Schaltfläche und nicht in der rechten oberen Ecke der Schaltfläche.

Dies ist der HTML-Code:

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

Aktualisieren:
Ich denke, was tatsächlich passiert, ist ein Margenproblem. Ich bekomme einen Rand von zwei Pixeln, sodass das Hintergrundbild nicht mehr angezeigt wird. Der Button und das Bild haben die gleiche Größe, was nur 20px ist, also ist es sehr auffällig ... Ich habe margin:0, padding:0 versucht, aber es hat nicht geholfen ...

92
Amit Hagin

Sie können das Eingabeartbild verwenden.

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

Es fungiert als Schaltfläche und kann die Ereignisbehandlungsroutinen enthalten.

Alternativ können Sie css verwenden, um Ihre Schaltfläche mit einem Hintergrundbild zu versehen und die Ränder, Ränder und Ähnliches entsprechend festzulegen.

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

Wenn das Bild ein Teil semantischer Daten ist (wie zum Beispiel ein Profilbild), verwenden Sie ein <img>-Element in Ihrem <button> und verwenden Sie CSS, um die Größe des <img> zu ändern. Wenn das Bild nur eine Möglichkeit ist, eine Schaltfläche optisch ansprechend zu gestalten, verwenden Sie CSS background-image, um den <button> zu formatieren (und verwenden Sie keinen <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:

enter image description here

53
ThinkingStiff

versuche dies

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

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 Schaltfläche automatisch an die Größe des Bildes angepasst.

3
Eli Davies

Warum verwenden Sie kein Bild mit einem onclick-Attribut?

Zum Beispiel:

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

Fügen Sie einen neuen Ordner mit dem Namen der Bilder in Ihrem Projekt 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">
0
Parameswaran