Set size of image in `ImageView` in button where image is set using css

Question

I used fitWidth and preserveRatio to size the ImageView in the FXML, but the image does not scale to it but instead shows its full size (too big in my case). How do I set the size of the image using FXML or css?

FXML

<Button
        fx:id="buttonUp"
        GridPane.columnIndex="0"
        GridPane.rowIndex="0"
        onAction="#buttonUp">
    <graphic>
        <ImageView fitWidth="10.0" pickOnBounds="true" preserveRatio="true">
        </ImageView>
    </graphic>
</Button>

CSS

#buttonUp {
    -fx-graphic: url('up.png');
}

#buttonUp:pressed {
    -fx-graphic: url("up_pressed.png");
}

I don't want a JavaFX code solution because I want to keep my styling in the fxml and css.

If this really isn't possible in FXML or css then I'd concede in doing it with java, in that case just leave a comment.

Image in FXML

When I try

<ImageView id="buttonDownImage" fitHeight="40.0" fitWidth="40.0" pickOnBounds="true" preserveRatio="true">
    <image>
        <Image url="resources/down.png" />
    </image>
</ImageView>

Then there follows an java.lang.IllegalArgumentException: Invalid URL: Invalid URL or resource not found while I'm sure the file is there (the css could find it) and the IntellJ autocomplete even suggested to start with resources in the url.

@GoXR3Plus Unfortunately that doesn't do anything, I think as expected since it only scales now to something bigger, when for me that scaling is overruled by something anyway. — PHPirate, Oct 13 '16 at 05:34
Have a look at this: http://stackoverflow.com/questions/40328355/graphic-automatically-fill-button I think most useful in this case would be the `-fx-background-size: contain`. — Abby, Nov 04 '16 at 13:45

score 0 · Answer 1 · answered Oct 12 '16 at 14:38

Not tested, but try using the CSS on the ImageView itself:

<Button
        fx:id="buttonUp"
        GridPane.columnIndex="0"
        GridPane.rowIndex="0"
        onAction="#buttonUp">
    <graphic>
        <ImageView id="buttonUpGraphic" fitWidth="10.0" pickOnBounds="true" preserveRatio="true">
        </ImageView>
    </graphic>
</Button>

and then in CSS:

#buttonUp #buttonUpGraphic {
    -fx-image: url('up.png');
}

#buttonUp:pressed #buttonUpGraphic {
    -fx-image: url('up_pressed.png');
}

Sounds like a plan, but the image disappears completely from the button, I'll try to find out why. — PHPirate, Oct 12 '16 at 14:41

score 0 · Accepted Answer · answered Oct 13 '16 at 15:23

0

If the pictures are too big, well, then resize them! Bad solution, but better than nothing.

answered Oct 13 '16 at 15:23

PHPirate

7,023
7
48
84

Set size of image in `ImageView` in button where image is set using css

2 Answers2