Afbeelding insluiten in een <knop> element

Ik probeer een png-afbeelding weer te geven op een <button>-element in HTML.
De knop is even groot als de afbeelding en de afbeelding wordt weergegeven, maar om de een of andere reden niet in het midden – dus het is onmogelijk om alles te zien.
Met andere woorden, het lijkt alsof de rechterbovenhoek van de afbeelding zich in het midden van de knop bevindt en niet in de rechterbovenhoek van de knop.

Dit is de HTML-code:

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

Bijwerken:
Wat er feitelijk gebeurt, denk ik, is een margeprobleem. Ik krijg een marge van twee pixels, dus de achtergrondafbeelding valt uit de knop. De knop en de afbeelding zijn even groot, namelijk slechts 20px, dus het valt erg op… Ik heb margin:0, padding:0, maar het heeft niet geholpen…

Antwoord 1, autoriteit 100%

Je zou een afbeelding van het invoertype kunnen gebruiken.

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

Het werkt als een knop en er kunnen gebeurtenishandlers aan gekoppeld zijn.

U kunt ook css gebruiken om uw knop op te maken met een achtergrondafbeelding en de randen, marges en dergelijke op de juiste manier in te stellen.

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

Antwoord 2, autoriteit 34%

Als de afbeelding een stukje semantische gegevens is (zoals een profielfoto, bijvoorbeeld), gebruik dan een <img>-element in je <button>en gebruik CSS om de grootte van de <img>aan te passen. Als de afbeelding slechts een manier is om een ​​knop visueel aantrekkelijk te maken, gebruik dan CSS background-imageom de <button>op te maken (en gebruik geen <img>).

Demo: http://jsfiddle.net/ThinkingStiff/V5Xqr/

HTML:

<button id="close-image"><img src="https://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;
}

Uitvoer:

Antwoord 3, autoriteit 6%

De eenvoudigste manier om een ​​afbeelding in een knop te plaatsen:

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

Hiermee wordt de grootte van de knop automatisch aangepast aan de grootte van de afbeelding.

Antwoord 4, autoriteit 5%

probeer dit

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

Antwoord 5, autoriteit 2%

Waarom gebruik je geen afbeelding met een onclick-attribuut?

Bijvoorbeeld:

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

Antwoord 6

Voeg een nieuwe map toe met de naam van afbeeldingen in uw project. Plaats enkele afbeeldingen in de map Afbeeldingen. Dan werkt het prima.

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

Antwoord 7

Probeer deze indeling en gebruik het kenmerk “width” om de afbeeldingsgrootte te beheren, het is eenvoudig. JavaScript kan ook in element worden geïmplementeerd.

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

<button type="button"><span><img src="images/xxx.png" /></span>&nbsp;Click Me</button>

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