title: Adjusting QML Image display size
body: <p>I have a QML window with a nested <code>RowLayout</code>. In the inner row I have two images. The source <code>.png</code> files for these images are (intentionally) rather large. When I attempt to set the <code>height</code> property on these images to make them smaller, they are still drawn large.</p>
  
  <p><strong>Desired Appearance</strong>:<br>
  <a href="https://i.stack.imgur.com/m8fjF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/m8fjF.png" alt="Two images side-by-side, taking up 1/3 of the window height"></a></p>
  
  <p><strong>Actual Appearance</strong>:<br>
  <a href="https://i.stack.imgur.com/oiUlf.png" rel="noreferrer"><img src="https://i.stack.imgur.com/oiUlf.png" alt="Two images side-by-side, far larger than their desired size"></a></p>
  
  <p>The only way I have been able to get them to be small is to set the <code>sourceSize.height:100</code> instead of <code>height:100</code>; however, this is not what I want. I want them to be able to scale up and down without reloading.</p>
  
  <p>How can I fix my QML so that the images take on the height of their containing <code>RowLayout</code>?</p>
  
  <pre class="lang-qml prettyprint-override"><code>import QtQuick 2.7
  import QtQuick.Controls 2.0
  import QtQuick.Layouts 1.3
  
  ApplicationWindow {
    width:600; height:300
    visible:true
  
    Rectangle {
      color:'red'
      anchors { top:header.bottom; bottom:footer.top; left:parent.left; right:parent.right }
    }
  
    header:RowLayout {
      id:header
      spacing:0
      height:100; width:parent.width
  
      RowLayout {
        id:playcontrol
        Layout.minimumWidth:200; Layout.maximumWidth:200; Layout.preferredWidth:200
        height:parent.height
        Image {
          // I really want these to take on the height of their row
          source:'qrc:/img/play.png'
          width:100; height:100
          fillMode:Image.PreserveAspectFit; clip:true
        }
        Image {
          source:'qrc:/img/skip.png'
          width:100; height:100
          fillMode:Image.PreserveAspectFit; clip:true
        }
      }
  
      Rectangle {
        color:'#80CC00CC'
        Layout.minimumWidth:200
        Layout.preferredWidth:parent.width*0.7
        Layout.fillWidth:true; Layout.fillHeight:true
        height:parent.height
      }
    }
  
    footer:Rectangle { height:100; color:'blue' }
  }
  </code></pre>