ฝังรูปภาพในองค์ประกอบ <button>

ฉันพยายามแสดงภาพ png ใน<button>องค์ประกอบใน HTML ปุ่มมีขนาดเดียวกับภาพและภาพจะปรากฏขึ้น แต่ด้วยเหตุผลบางประการไม่ได้อยู่ตรงกลางจึงไม่สามารถมองเห็นได้ทั้งหมด กล่าวอีกนัยหนึ่งก็คือดูเหมือนว่ามุมขวาบนของภาพจะอยู่ตรงกลางปุ่มไม่ใช่ที่มุมขวาบนของปุ่ม

นี่คือรหัส HTML:

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

อัปเดต:
สิ่งที่เกิดขึ้นจริงฉันคิดว่าเป็นปัญหาระยะขอบ ฉันได้ระยะขอบสองพิกเซลดังนั้นภาพพื้นหลังจึงหลุดออกจากปุ่ม ปุ่มและภาพที่มีขนาดเดียวกันซึ่งเป็นเพียง20pxดังนั้นจึงเห็นได้ชัดมาก ... ฉันพยายามmargin:0, padding:0แต่มันก็ไม่ได้ช่วย ...

คุณสามารถใช้ภาพประเภทอินพุต

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

ทำงานเป็นปุ่มและสามารถติดตัวจัดการเหตุการณ์ไว้ได้

หรือคุณสามารถใช้ css เพื่อจัดรูปแบบปุ่มของคุณด้วยภาพพื้นหลังและตั้งค่าเส้นขอบระยะขอบและสิ่งที่คล้ายกันได้อย่างเหมาะสม

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

หากรูปภาพเป็นข้อมูลเชิงความหมาย (เช่นรูปโปรไฟล์เป็นต้น) ให้ใช้<img>องค์ประกอบภายในของคุณ<button>และใช้ CSS เพื่อปรับขนาดไฟล์<img>. หากรูปภาพเป็นเพียงวิธีหนึ่งในการสร้างปุ่มที่ดึงดูดสายตาให้ใช้ CSS background-imageเพื่อจัดรูปแบบ<button>(และอย่าใช้<img>)

การสาธิต: 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;
}

เอาท์พุต:

วิธีที่ง่ายที่สุดในการใส่รูปภาพลงในปุ่ม:

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

การดำเนินการนี้จะปรับขนาดปุ่มเป็นขนาดของรูปภาพโดยอัตโนมัติ

ลองดู

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

ทำไมคุณไม่ใช้รูปภาพที่มีonclickแอตทริบิวต์

ตัวอย่างเช่น:

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

เพิ่มโฟลเดอร์ใหม่พร้อมชื่อรูปภาพในโปรเจ็กต์ของคุณ ใส่รูปภาพลงในโฟลเดอร์รูปภาพ แล้วมันจะทำงานได้ดี

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

ลองใช้รูปแบบนี้และใช้แอตทริบิวต์ "width" เพื่อจัดการขนาดภาพซึ่งทำได้ง่าย สามารถใช้ JavaScript ในองค์ประกอบได้เช่นกัน

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

หัวข้อคือ 'ภาพฝังในองค์ประกอบที่ปุ่ม' และคำถามโดยใช้HTML แบบพื้นฐาน ฉันทำสิ่งนี้โดยใช้แท็ก span ในลักษณะเดียวกับที่ใช้ glyphicons ใน bootstrap รูปภาพของฉันมีขนาด 16 x 16px และสามารถเป็นรูปแบบใดก็ได้

นี่คือ HTML ธรรมดาที่ตอบคำถาม:

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

ปุ่มไม่รองรับรูปภาพโดยตรง ยิ่งไปกว่านั้นวิธีที่คุณทำคือการเชื่อมโยง ()

รูปภาพจะถูกเพิ่มลงบนปุ่มโดยใช้คุณสมบัติ BACKGROUND-IMAGE ในรูปแบบ

คุณยังสามารถระบุการทำซ้ำและคุณสมบัติอื่น ๆ โดยใช้แท็ก

ตัวอย่างเช่นรูปภาพพื้นฐานที่เพิ่มลงในปุ่มจะมีรหัสนี้:

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

สันติภาพ