JavaFX FXML中用CSS让ImageView完全适配Button并去除边框

你的问题核心在于Button默认自带边框、内边距，且Button的预设尺寸和内部ImageView不匹配，导致出现多余边框和适配问题。以下是具体修改方案：

关键调整点 #

1. 移除Button默认视觉样式
   给Button添加style属性，彻底去掉背景、边框和内边距，只保留点击交互能力：

   style="-fx-background-color: transparent; -fx-border-width: 0; -fx-padding: 0;"
   

2. 让Button尺寸匹配ImageView
   原代码中Button的prefHeight="50.0"和prefWidth="30.0"远小于ImageView的200x150，导致图像无法填满Button。你可以直接把Button的尺寸设置成和ImageView一致，或者去掉这两个属性让Button自适应ImageView大小：

   prefHeight="200.0" prefWidth="150.0"
   

修改后的完整FXML代码 #

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="720.0" prefWidth="1280.0" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.KlondikeController">
   <children>
      <ImageView fitHeight="720.0" fitWidth="1280.0">
         <image>
            <Image url="@../images/KlondikeBackground.png" />
         </image>
      </ImageView>
      <Button fx:id="TestButton" layoutX="100.0" layoutY="100.0" mnemonicParsing="false" onAction="#TestClicked" 
              prefHeight="200.0" prefWidth="150.0" contentDisplay="CENTER"
              style="-fx-background-color: transparent; -fx-border-width: 0; -fx-padding: 0;">
          <graphic>
              <ImageView fx:id="buttonImage" fitHeight="200.0" fitWidth="150.0" preserveRatio="true">
                  <Image url="@../images/10c.png"/>
              </ImageView>
          </graphic>
      </Button>
   </children>
</AnchorPane>

额外说明 #

• 给ImageView添加preserveRatio="true"能保证纸牌图片比例不被拉伸变形，若需要图片完全填充Button，可去掉该属性。
• 如果后续需要添加点击反馈（比如按下时的视觉效果），可以在style里自定义伪类样式（如:hover、:pressed状态），不会破坏当前的无框效果。

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