title: Image distorted when widget size differs from dimensions of stored image
body: <p>I have a square button like this:</p>
  <pre><code>from kivy.app import App
  from kivy.uix.button import Button
  
  
  class MyTestApplication(App):
      def build(self):
          b = Button(size_hint=(None, None), height=200, width=200,
                     background_normal='my_icon.png')
  
          return b
  
  MyTestApplication().run()
  </code></pre>
  <p>The image I set as a button background is distorted when I use a button size that differs from the stored image.</p>
  <p>The image <code>my_icon.png</code> is this:<br />
  <a href="https://i.stack.imgur.com/Bz4JP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bz4JP.png" alt="enter image description here" /></a></p>
  <p>When I use <code>height=100</code> and <code>width=100</code> (those are the actual dimensions of
  <code>my_icon.png</code>) it looks as expected.</p>
  <p>However, when I use smaller or greater values I get the following:<br />
  <a href="https://i.stack.imgur.com/n407j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n407j.png" alt="enter image description here" /></a></p>
  <p>and</p>
  <p><a href="https://i.stack.imgur.com/9fbJT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9fbJT.png" alt="enter image description here" /></a></p>
  <p><strong>Question:</strong><br />
  What causes this distortion and how can I fix it?</p>