Nhúng hình ảnh trong phần tử <button>

Tôi đang cố gắng hiển thị hình ảnh png trên một thành <button>phần trong HTML. Nút có cùng kích thước với hình ảnh và hình ảnh được hiển thị nhưng vì một số lý do không nằm ở trung tâm - vì vậy không thể nhìn thấy tất cả. Nói cách khác, có vẻ như góc trên cùng bên phải của hình ảnh nằm ở trung tâm của nút chứ không phải ở góc trên cùng bên phải của nút.

Đây là mã HTML:

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

Cập nhật:
Những gì thực sự xảy ra, tôi nghĩ, là một vấn đề lề. Tôi nhận được một lề hai pixel, vì vậy hình ảnh nền sẽ ra khỏi nút. Các nút và các hình ảnh có cùng kích thước, mà chỉ là 20px, vì vậy nó rất đáng chú ý ... tôi đã cố gắng margin:0, padding:0nhưng nó đã không thể giúp ích ...

Bạn có thể sử dụng hình ảnh loại đầu vào.

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

Nó hoạt động như một nút và có thể có các trình xử lý sự kiện gắn liền với nó.

Ngoài ra, bạn có thể sử dụng css để tạo kiểu cho nút của mình bằng hình nền và đặt đường viền, lề và những thứ tương tự.

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

Nếu hình ảnh là một phần của dữ liệu ngữ nghĩa (ví dụ như ảnh hồ sơ), thì hãy sử dụng một <img>yếu tố bên trong bạn <button>và sử dụng CSS để thay đổi kích thước <img>. Nếu hình ảnh chỉ là một cách để làm cho một nút dễ nhìn, hãy sử dụng CSS background-imageđể tạo kiểu cho <button>(và không sử dụng một <img>).

Bản giới thiệu: 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;
}

Đầu ra:

thử cái này

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

Cách đơn giản nhất để đặt một hình ảnh vào một nút:

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

Điều này sẽ tự động thay đổi kích thước nút theo kích thước của hình ảnh.

Tại sao bạn không sử dụng hình ảnh với onclick thuộc tính?

Ví dụ:

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

Thêm thư mục mới với tên của hình ảnh trong dự án của bạn. Đặt một số hình ảnh vào thư mục Hình ảnh. Sau đó, nó sẽ hoạt động tốt.

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

Hãy thử thích định dạng này và sử dụng thuộc tính "width" để quản lý kích thước hình ảnh, thật đơn giản. JavaScript cũng có thể được thực hiện trong phần tử.

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

Các nút không hỗ trợ trực tiếp hình ảnh. Ngoài ra, cách bạn đang làm là dành cho các liên kết ()

Hình ảnh được thêm vào qua các nút bằng cách sử dụng thuộc tính BACKGROUND-IMAGE

bạn cũng có thể chỉ định lặp lại và các thuộc tính khác bằng cách sử dụng thẻ

Ví dụ: một hình ảnh cơ bản được thêm vào một nút sẽ có mã này:

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

Sự thanh bình