JavaFX ScrollPane doesnt fit to width

Question

I have a ScrollPane with a Pane inside. Initially the Pane is empty, but I add some ImageViews to it dynamically (vertically ordered). The images should be resized so that they fit into the ScrollPane without having to scroll horizontally. This is what I do so far:

// Pane that is content of ScrollPane and member variable of object
private MigPane imagesPane = new MigPane("fill");
...
// creating ScrollPane in some method and add to current view
ScrollPane spImages = new ScrollPane();
spImages.setContent(imagesPane);
spImages.setFitToWidth(true);
add(spImages, "wrap");
...
// adding images in another method
getPm().getImages().forEach(image -> {
        ImageView img = new ImageView(image);
        img.setPreserveRatio(true);
        img.fitWidthProperty().bind(imagesPane.widthProperty());
        imagesPane.add(img, "wrap");
    });

That doesn't resize the image so that it fits to the ScrollPane's width, but why? What am I missing?

Answer 1

The image fits to the Width of the content only, and not to the height but if you add:

scrollPane.setFitToHeight(true); // it will fits to the height also !

and also :

img.fitHeightProperty().bind(imagesPane.heightProperty()); // to bind the height of the imageview to the content's height

And for some reason I do not know this method setPreserveRatio(true) causes problem. I think it keep the quality of the image by limiting its resizing , If you remove it your image will fit correctly the two horizontal and vertical axes.

setPreserveRatio : Indicates whether to preserve the aspect ratio of the source image when scaling to fit the image within the fitting bounding box.

Edit :

It will depend on your layout (content) if you want to realize that you will need a VBox for example :

    VBox container = new VBox();
    ScrollPane sp = new ScrollPane(container);
    sp.setPrefSize(400, 400);
    sp.setFitToWidth(true); 

    ImageView img = new ImageView(getClass().getResource("imgA.png").toString());
    img.setPreserveRatio(true);
    img.fitWidthProperty().bind(container.widthProperty());

    ImageView img2 = new ImageView(getClass().getResource("imgB.png").toString());
    img2.setPreserveRatio(true);
    img2.fitWidthProperty().bind(container.widthProperty());

    container.getChildren().addAll(img,img2);

Good luck !