java - JavaFX 使内容适合 Gridpane 单元格

Question

所以，我试图让用户将图片上传到网格窗格

到目前为止，我设法让图片显示出来，但问题是如果窗口大小改变，图片保持不变。

我尝试使用带边距的计算尺寸，但它不能按我想要的方式工作。

图一，我想要的样子：

http://imgur.com/1XjVPfF

图 2，它是如何显示的

http://imgur.com/a/b2cMD

编辑：这是图片标签的代码：

 <Tab closable="false" text="Bilder">
     <content>
        <GridPane>
          <columnConstraints>
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
              <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
              <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
              <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
          </columnConstraints>
          <rowConstraints>
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
              <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
              <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          </rowConstraints>
           <children>
              <Button fx:id="addPic" mnemonicParsing="false" onAction="#choseFile" text="Bild hinzuügen" GridPane.columnIndex="4" GridPane.halignment="RIGHT" GridPane.rowIndex="4">
                 <GridPane.margin>
                    <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                 </GridPane.margin>
              </Button>
              <ImageView fx:id="image1" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.hgrow="ALWAYS" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image2" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image3" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" GridPane.hgrow="ALWAYS" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image4" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="3" GridPane.hgrow="ALWAYS" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image5" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="4" GridPane.hgrow="ALWAYS" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image6" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image7" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin>
              </ImageView>
              <ImageView fx:id="image8" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image9" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="3" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image10" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="4" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image11" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.hgrow="ALWAYS" GridPane.rowIndex="2" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image12" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" GridPane.rowIndex="2" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image13" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" GridPane.hgrow="ALWAYS" GridPane.rowIndex="2" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image14" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="3" GridPane.hgrow="ALWAYS" GridPane.rowIndex="2" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image15" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="4" GridPane.hgrow="ALWAYS" GridPane.rowIndex="2" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image16" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.hgrow="ALWAYS" GridPane.rowIndex="3" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image17" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" GridPane.rowIndex="3" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image18" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" GridPane.hgrow="ALWAYS" GridPane.rowIndex="3" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image19" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="3" GridPane.hgrow="ALWAYS" GridPane.rowIndex="3" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image20" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="4" GridPane.hgrow="ALWAYS" GridPane.rowIndex="3" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
           </children>
        </GridPane>
     </content>
</Tab>