CustomTkinter带图片按钮命中框过大，如何使其匹配图片尺寸？

问题根源 #

CTkButton默认自带内边距（padx/pady），且你设置的按钮宽度（width=50）远小于图片实际宽度，导致按钮的点击区域（命中框）被内边距和不匹配的尺寸拉伸，超出了图片范围。

修复方案 #

1. 移除默认内边距：给按钮设置padx=0和pady=0，消除内边距带来的额外点击区域
2. 匹配按钮与图片尺寸：将按钮的width设为图片的实际宽度（165），height保持38，让按钮边界和图片完全对齐

修改后的完整代码 #

import customtkinter as ctk
import tkinter as tk

from customtkinter import CTkButton, CTkLabel, CTkEntry, CTkFrame, filedialog, CTk, CTkImage, CTkCanvas
from tkinter import messagebox
from PIL import Image


app = ctk.CTk()
app.geometry("350x800")
app.title("Students")

canvas = CTkCanvas(app, width=350, height=800, background="white")
canvas.place(x=0, y=0)

def sel_class_folder():
    class_folder = ctk.filedialog.askdirectory()

canvas.create_rectangle(201, 6, 321, 61, fill="white", outline="black")

folderSelectorUI = CTkImage(Image.open("./assets/classSelButton.png"), size=(165,38))
# 关键修改：移除内边距，按钮宽度匹配图片尺寸
folderSelector = ctk.CTkButton(
    master=app, 
    image=folderSelectorUI, 
    text="", 
    command=sel_class_folder, 
    bg_color='white', 
    width=165,  # 改为图片宽度165
    height=38, 
    fg_color="white", 
    anchor="NW", 
    corner_radius=0, 
    hover_color="red",
    padx=0,  # 移除水平内边距
    pady=0   # 移除垂直内边距
)
folderSelector.place(x=30, y=16)


app.mainloop()

效果说明 #

修改完成后，按钮的命中框会完全贴合图片的165×38尺寸，红色hover区域将不再超出图片范围。

内容的提问来源于stack exchange，提问作者Anosk