在網頁設計中，按鈕是用戶直接與網站交互的元素之一。為了增強用戶體驗，常常會在按鈕上添加圖片，但圖片大小和按鈕大小的差別，往往會導致按鈕樣式出現問題。本文將介紹如何使用CSS自適應按鈕圖片。

.btn {
display: inline-block;
padding: 10px 20px;
background-image: url("button-icon.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
/* 圖片自適應縮放 */
}

以上代碼是自適應按鈕圖片的核心，其中background-size: contain;可以讓背景圖片根據容器大小進行比例縮放，并保持比例不變。

另外，要讓按鈕自適應圖片，需要注意以下幾點：

• 按鈕需要設置成display: inline-block;或display: block;，才能讓圖片大小隨容器調整。
• 為了不影響文字排版，不建議使用background-size: cover;，它會使圖片縮放至完全覆蓋容器，從而可能會導致圖片失真。
• 如果想要圖片和容器大小一致，可以使用background-size: 100% 100%;，但這樣可能會拉伸圖片，使其失真。

最后，如果要讓圖片自適應按鈕大小，還需要注意以下細節：

• 圖片尺寸建議與按鈕大小保持一致或略大，這樣比例縮放時效果會最好。
• 如果圖片與背景顏色有較大差別，建議添加透明度。

總之，CSS可以很好地實現按鈕圖片的自適應縮放，讓按鈕與圖片完美融合，為用戶提供更好的使用體驗。