title: Set size of image in `ImageView` in button where image is set using css
body: <p>I used <code>fitWidth</code> and <code>preserveRatio</code> to size the <code>ImageView</code> 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?</p>
  
  <p><strong>FXML</strong></p>
  
  <pre><code>&lt;Button
          fx:id="buttonUp"
          GridPane.columnIndex="0"
          GridPane.rowIndex="0"
          onAction="#buttonUp"&gt;
      &lt;graphic&gt;
          &lt;ImageView fitWidth="10.0" pickOnBounds="true" preserveRatio="true"&gt;
          &lt;/ImageView&gt;
      &lt;/graphic&gt;
  &lt;/Button&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#buttonUp {
      -fx-graphic: url('up.png');
  }
  
  #buttonUp:pressed {
      -fx-graphic: url("up_pressed.png");
  }
  </code></pre>
  
  <p>I don't want a JavaFX code solution because I want to keep my styling in the fxml and css.</p>
  
  <p>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.</p>
  
  <p><strong>Image in FXML</strong></p>
  
  <p>When I try</p>
  
  <pre><code>&lt;ImageView id="buttonDownImage" fitHeight="40.0" fitWidth="40.0" pickOnBounds="true" preserveRatio="true"&gt;
      &lt;image&gt;
          &lt;Image url="resources/down.png" /&gt;
      &lt;/image&gt;
  &lt;/ImageView&gt;
  </code></pre>
  
  <p>Then there follows an <code>java.lang.IllegalArgumentException: Invalid URL: Invalid URL or resource not found</code> while I'm sure the file is there (the css could find it) and the IntellJ autocomplete even suggested to start with <code>resources</code> in the url.</p>