JavaFx image resizing

Question

I have a borderPane with a menu top,a grid left and an image in the center.I want the image to have the same size as the center of the border because now the image goes over my grid.

I tried this:

           imageView.fitWidthProperty().bind(box.widthProperty());

where imageView is the name for my image and box is the BorderPane object.Thank you.

Answer 1

See JavaFX Feature Request RT-21337 Add ImageViewPane and MediaViewPane controls which contains a code attachment for a sample ImageViewPane implementation which which will resize the ImageView it contains to the area available to the region. To get the behaviour required you might also need to implement computeMinWidth and computeMinHeight on the ImageViewPane so that they return zero rather than the minimum size of the Image.

---

now the image goes over my grid

This is because the minimum size of your image is currently larger than the available space of the center of your BorderPane:

BorderPane does not clip its content by default, so it is possible that childrens' bounds may extend outside its own bounds if a child's min size prevents it from being fit within it space.

Some potential alternatives to prevent the center content overflowing the border:

1. Manually set a clip on the center node to prevent it overflowing the borders.
2. Dynamically resize the ImageView as in the ImageViewPane sample linked above.
3. Place the ImageView in a ScrollPane.
4. Use the css -fx-background-image attributes to display and dynamcially resize your image rather than using an ImageView.
5. Set the center of the borderpane first before setting the border content, that way it will be rendered underneath the border content.
6. Use a different construct from a borderpane (e.g. a HBoxes, VBoxes, etc.) which don't overlap their nodes when the nodes are larger than the available display area.

I tried this: imageView.fitWidthProperty().bind(box.widthProperty());

My guess from the code provided is that this didn't work because the enclosing box of the image is a dynamically resizable pane of some sort, so the minimum width of the box is being determined by the width of the image and not vice versa.