title: How to perform a smooth downscaling of background images in Qt styles?
body: <p>As default, Qt uses a very simple, quick and ugly way of scaling images, <code>Qt::FastTransformation</code>, probably a nearest neighbor interpolation or something very similar.</p>
  
  <p>When dealing with a <code>QPixmap</code>, one can choose a visually better scaling, for example, </p>
  
  <pre><code>pixmap = pixmap.scaledToHeight(height, Qt::SmoothTransformation);
  </code></pre>
  
  <p>However, what can we do if the image is not in a <code>QPixmap</code> object, but simply a background of a button, or some other widget?</p>
  
  <p>For example, the following is a very simple way of creating an automatically resizing, fully customized button, well suited for a resolution-independent application, when used with layouts and <code>setStretch()</code>.</p>
  
  <pre><code>ui-&gt;pushButton-&gt;setStyleSheet(
      "QPushButton { border-image: url(:/img/button.png) 0 0 0 0 stretch stretch; }"
      "QPushButton:checked { border-image: url(:/img/button_checked.png) 0 0 0 0 stretch stretch; }"
      "QPushButton:pressed { border-image: url(:/img/button_pressed.png) 0 0 0 0 stretch stretch; }"
      "QPushButton:checked:pressed { border-image: url(:/img/button_checked_pressed.png) 0 0 0 0 stretch stretch; }"
      );
  </code></pre>
  
  <p>I used <code>border-image</code> instead of <code>background-image</code> due to <a href="https://forum.qt.io/topic/40151/solved-scaled-background-image-using-stylesheet" rel="noreferrer">a deficiency</a> in the Qt style sheets. </p>
  
  <p>How can I have a smoother scaling with images used in style sheets?</p>
  
  <p>Implementing the same thing with pixmaps is much less elegant. I'll have to always catch resize events, recompute the new sizes of all my widgets, and repaint them manually.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>Interestingly, the smooth scaling works with stylesheets if the image is being enlarged, but not when it is shrinked.</p>
  
  <p>In the following example, in the first row, a 32*32 icon is used, and in the second row, a uniform grid larger than 2000*2000.</p>
  
  <p><a href="https://i.stack.imgur.com/xki4j.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xki4j.png" alt="example"></a></p>