Question

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.

    button 
    {
      width:40px; 
      height:40px; 
      border: 0
    }

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,

    square.style.backgroundImage = imgLink; // square is the button, imgLink is "WhiteKing.jpg" for example.

I get pieces like this –

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.

Answer 1

Most modern browsers have support for CSS background-image options like background-size, so you may really use something like this:

button{
  width:40px; 
  height:40px; 
  border: 0;
  background-size: 100%; /* To fill the dimensions of container (button), or */
  background-size: 40px auto; /* to specify dimensions explicitly */
}

Of course you can use that in JavaScript too (but it’s better to add it to already existing CSS for button):

square.style.backgroundSize = '100%';