title: How to make background image shrink proportionally to fit button size in javascript?
body: <p>I am making a chessboard in javascript. The chessboard's squares (buttons) were originally designed to be 60px by 60px, but now they are 40px by 40px. </p>
  
  <pre><code>    button 
      {
        width:40px; 
        height:40px; 
        border: 0
      }
  </code></pre>
  
  <p>However, some of the pieces that were designed for this earlier chessboard are still 60px by 60px. Is there any way in Javascript to make the images shrink proportionally to fit the square size? Currently, the images fit the square size, but do not shrink, so when I say,</p>
  
  <pre><code>    square.style.backgroundImage = imgLink; // square is the button, imgLink is "WhiteKing.jpg" for example.
  </code></pre>
  
  <p>I get pieces like this - </p>
  
  <p><img src="https://i.stack.imgur.com/RaR8U.jpg" alt="enter image description here"></p>
  
  <p>If the WhiteKing.jpg had shrunk proportionally, it would have fit nicely. Is there a way to do this in Javascript? Any help would be really appreciated. </p>