How to stretch media view while keeping the media view in center in javafx

Question

I'm setting up a media view to stretch according to the container(anchor pane) while preserving the aspect ratio of the media by binding the media view width and height by the container width and height. I discovered that when resizing only the width of the container, the media view resizes but the media is always on the left of the media view or when resizing the height, the media is always on the top. but I want it to be centered for both X layout and Y layout while still resizing.

I tried binding the xtranslate of the media view with the subtraction of anchor pane width and media view width divided by 2, but it doesn't work since media view width is binded with the container width the subtraction between them will always produce 0, eventually xtranslate always takes 0.

mainMediaView.setPreserveRatio(true);

// binding both media view width and height to anchor pane width and height
mainMediaView.fitWidthProperty().bind(centerAnchorPane.widthProperty());
mainMediaView.fitHeightProperty().bind(centerAnchorPane.heightProperty());

// should make media view move to center according to X coordinates
mainMediaView.translateXProperty().bind(centerAnchorPane.widthProperty()
    .subtract(mainMediaView.fitWidthProperty()).divide(2));

// should make media view move to center according to Y coordinates
mainMediaView.translateYProperty().bind(centerAnchorPane.heightProperty()
    .subtract(mainMediaView.fitHeightProperty()).divide(2));

Answer 1

you can "bind" your mediaView to the anchorPane with this:

centreAnchorPane.setTopAnchor(mainMediaView, 0.0);
centreAnchorPane.setBottomAnchor(mainMediaView, 0.0);
centreAnchorPane.setLeftAnchor(mainMediaView, 0.0);
centreAnchorPane.setRightAnchor(mainMediaView, 0.0);

now set the alignment to centre and you are done ^^

link to documentation

best regards