[FIXED] ImageView not resizing to fit

Issue

I have an ImageView added to a Pane (part of a custom dialog window); but when setting the image, it's being clipped instead of resized.

Here's the component's FXML:

<ImageView fx:id="dialogArt" fitHeight="100.0" fitWidth="100.0" layoutX="180.0" pickOnBounds="true" preserveRatio="true">
    <viewport>
        <Rectangle2D height="100.0" width="100.0" />
    </viewport>
</ImageView>

And in the controller (because the image can change whenever its shown):

dialogArt.setImage(new Image(new FileInputStream("d:/wire.jpg")));
            
dialogArt.setFitWidth(100);
dialogArt.setFitHeight(100);

I know the setFit is redundant here but I was trying different things. Still fairly knew to FX.

Solution

As noted by DaveB in comments:

Take out the viewport stuff. Once you put in a viewport, then it just scales the size of the viewport.

See the viewport documentation to understand why you don't want to use a viewport in this instance:

• If viewport is null, the entire image is displayed.
• If viewport is non-null, only the portion of the image which falls within the viewport will be displayed.
• If the image does not fully cover the viewport then any remaining area of the viewport will be empty.

However, you want to display the complete image, so you should not define a viewport.

Answered By - jewelsea
Answer Checked By - Marilyn (JavaFixing Volunteer)