JavaFX FXML-SceneBuilder-Image-resizable

Question

My question is, how does one achieve automatic resizing of images during manipulation with the size of the application window in JavaFX? Could be this done directly in SceneBuilder?

Answer 1

Not using a ImageView , but if you add a image as background image for a Region , that means the Region can be resized and so can the background image, if the appropriate settings are used. Eg You could use the following CSS properties to include the stackoverflow logo in a Region :

-fx-background-image: url('http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a');
-fx-background-size: contain;
-fx-background-repeat: no-repeat;
-fx-background-position: center;

(In the above code the property name and the value are seperated by : and the ; is not part of the value. It's written as you'd write it in a rule in a css stylesheet.)

You can replace contain with stretch to not preserve the aspect ratio. In this case you don't need the -fx-background-position property.

More info about the properties used can be found in the CSS doc for Region .

This should work as long as you add it to the Region that is resized. If you want the image to be resized to the full scene size, you need to set the properties at root Pane .

Other than that you'd probably need to write a custom control. (AFAIK it's not possible to use expression binding from SceneBuilder.)

Answer 2

It would work with binding its WidthProperty and HeightProperty to the size of the window. Let's assume that the Node root reflects the window's size.

ImageView iv = new ImageView();
iv.fitWidthProperty().bind(root.widthProperty());
iv.fitHeightProperty().bind(root.heightProperty());

Now it scratches with the parent's property ( root ). You can also choose the different Node or perform some of calculation to amend the size.