JavaFX中ImageView自适应可用空间且保持比例的问题

Hey there! I see your ImageView is spilling out past the top menu and bottom container, only respecting the width constraint. Let's get this sorted so your image scales properly while keeping its aspect ratio.

What's causing the issue? #

1. Uninitialized layout values: When you call imageDisplay.getFitWidth() and imageDisplay.getFitHeight() in initialize(), the BorderPane hasn't finished laying out yet. Those values are likely 0 or default, so the image loads with incorrect sizing.
2. No dynamic size binding: The ImageView isn't tied to the available space in the BorderPane's center region, so it doesn't adjust when the window or container sizes change.

Step 1: Update the FXML Layout #

First, let's ensure the ImageView is constrained to the center region's available space. Wrap the ImageView in an AnchorPane (this makes it easy to bind to the container's size) and set up bindings for fitWidth and fitHeight. We'll keep preserveRatio="true" to maintain the image's aspect ratio.

Here's the adjusted center section of your FXML:

<center>
    <AnchorPane fx:id="imageContainer">
        <ImageView fx:id="imageDisplay" 
                   cache="true" cacheHint="SPEED" depthTest="ENABLE"
                   pickOnBounds="true" preserveRatio="true" smooth="false">
            <!-- Bind fitWidth to the container's width -->
            <fitWidth>
                <AnchorPane.widthProperty>
                    <Binding source="${imageContainer.width}" />
                </AnchorPane.widthProperty>
            </fitWidth>
            <!-- Bind fitHeight to the container's height -->
            <fitHeight>
                <AnchorPane.heightProperty>
                    <Binding source="${imageContainer.height}" />
                </AnchorPane.heightProperty>
            </fitHeight>
        </ImageView>
    </AnchorPane>
</center>

Step 2: Fix Image Loading in the Controller #

Now, update your setDefaultImage() method to load the image without hardcoding size values. Let the ImageView handle scaling based on the bindings we set up:

private void setDefaultImage() {
    System.out.println(Systats.getScreenHeight());
    // Load the full image - the ImageView will scale it properly
    Image defaultImage = new Image("images/dirt.jpg");
    imageDisplay.setImage(defaultImage);
}

Why This Works #

• preserveRatio="true" ensures the image never stretches; it will scale until one dimension hits the container's edge, then resize the other proportionally.
• Binding fitWidth and fitHeight to the AnchorPane's size means the ImageView automatically adjusts when the window or container resizes.
• Loading the image without specifying width/height avoids using uninitialized layout values, letting the ImageView use the full image data for correct scaling.

Alternative Controller-Only Fix #

If you don't want to modify the FXML, you can add listeners to dynamically adjust the ImageView's size when the parent container changes:

@Override
public void initialize(URL location, ResourceBundle resources) {
    imageDisplay.setPreserveRatio(true);
    
    // Listen for parent container size changes
    imageDisplay.parentProperty().addListener((obs, oldParent, newParent) -> {
        if (newParent != null) {
            newParent.boundsInLocalProperty().addListener((boundsObs, oldBounds, newBounds) -> {
                imageDisplay.setFitWidth(newBounds.getWidth());
                imageDisplay.setFitHeight(newBounds.getHeight());
            });
        }
    });
    
    this.setDefaultImage();
}

private void setDefaultImage() {
    System.out.println(Systats.getScreenHeight());
    imageDisplay.setImage(new Image("images/dirt.jpg"));
}

This will automatically adjust the ImageView's fit size whenever the parent container's dimensions change, keeping the image within bounds and proportional.

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