resize image to adapt to grid pane cells size

[lyna lola]

Hello everyone,
I am here asking for your advice and help with an interface. I am trying to reproduce an interface ( attached image). I have some doubts about the middle part. I don't know how to make the images of the cards resizable and responsive according to the size of the cells of the grid pane. For now, it works by code, but I don't think mixing front and back is a good practice. And my CSS doesn't work.

Here is a snippet of the code of the controller, that  want to change :

 public void addCard(CardImpl card){
        card.setImage(new Image(card.getSmallCardImage()));
        
           //TO DO: WANT TO REMOVE THE FRONT CODE AND PUT IT IN AS CSS IF POSSIBLE
            /*card.setImage(new Image(card.getSmallCardImage()));
            card.setFitWidth(150);
            card.setFitHeight(150);*/

        int row = cardList.getRowCount();
        int childrenSize = cardList.getChildren().size();
        int col = cardList.getChildren().size() % 5;

        if (childrenSize != 0 && col % 5 == 0) {
            row++;
        }
        cardList.add(card, col, row - 1);
    }

Here is the fxml file  :

<AnchorPane onDragOver="#dragOver" prefHeight="800.0" prefWidth="800.0" stylesheets="@../css/Deck.css" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.yugioh.controllers.DeckController">
    <VBox prefHeight="800.0" prefWidth="800.0" spacing="7.0" AnchorPane.bottomAnchor="1.0" AnchorPane.leftAnchor="1.0" AnchorPane.rightAnchor="1.0" AnchorPane.topAnchor="1.0">
        <Label fx:id="deckType" prefHeight="50.0" prefWidth="800.0" styleClass="container" stylesheets="@../css/Deck.css" text="Label">
         <font>
            <Font size="18.0" />
         </font>
      </Label>
        <GridPane fx:id="cardList" alignment="CENTER" gridLinesVisible="true" onDragDropped="#dragDropped" onDragEntered="#dragEntered" onDragExited="#dragExited" onDragOver="#dragOver" onMouseClicked="#remove" prefHeight="756.0" prefWidth="798.0" styleClass="gridPane" VBox.vgrow="NEVER">
            <columnConstraints>
                <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
            </columnConstraints>
            <rowConstraints>
                <RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="30.0" vgrow="SOMETIMES" />
            </rowConstraints>
         <VBox.margin>
            <Insets />
         </VBox.margin>
        </GridPane>
      <padding>
         <Insets top="10.0" />
      </padding>
    </VBox>
</AnchorPane>

and finally CSS  :

Label
{
    -fx-text-fill: white;
    -fx-text-alignment: left;
    -fx-padding: 0px 0px 0px 10px;
    -fx-line-height: 40px;
    -fx-max-height: 40px;
    -fx-margin: 10px 0px 7px 0px;
}

.container{
    -fx-border-radius: 10px;
    -fx-border-color: #777777;
    -fx-border-width: 1px;
    -fx-background-color: #111925;
    -fx-margin: 10px 0px 7px 0px; /* Add the margin here */
}

.gridPane > ImageView{
     -fx-pref-width: 50px;
     -fx-pref-height: 50px;
}

[Lou Hamers]

You're not breaking any design rules (at least JavaFX ones) by doing that in code, honestly. Some things in JFX simply aren't supported in CSS, but are possible in code. This is probably one of those things (not saying it is for sure, maybe you'll find a way..). So if that code works, I would say you have a solution right there.

Calling these classes "controllers" may not be the most accurate, from an MVC perspective. But then again I suppose I could argue that either way; especially given how many slightly different takes there are on MVC and its variations...