Установите размер изображения в `ImageView` в кнопке, где изображение устанавливается с помощью CSS

Question

Я использовал fitWidth а также preserveRatio оценить размер ImageView в FXML, но изображение не масштабируется до него, а вместо этого показывает его полный размер (слишком большой в моем случае). Как установить размер изображения с помощью FXML или 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");
}

Я не хочу решения кода JavaFX, потому что я хочу сохранить свой стиль в fxml и css.

Если это действительно невозможно в FXML или CSS, то я бы согласился сделать это с Java, в этом случае просто оставьте комментарий.

Изображение в FXML

Когда я пытаюсь

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

Затем следует java.lang.IllegalArgumentException: Invalid URL: Invalid URL or resource not found хотя я уверен, что файл там (css может найти его) и автозаполнение IntellJ даже предложил начать с resources в URL.

Answer 1

Если картинки слишком большие, то измените их размер! Плохое решение, но лучше, чем ничего.

Answer 2

Не проверено, но попробуйте использовать CSS на ImageView сам:

<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>

а затем в CSS:

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

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