How to make background image shrink proportionally to fit button size in javascript?

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%';

Your going to want to use: Background-size: 100%;

There are different options for how to do this, but if it was me, I'd physically resize the actual image files to maintain optimal control over the image quality. If there are a lot of files, and this would be time consuming to do in Photoshop (or whatever image editor you use), then use your favourite scripting language paired with something like ImageMagick and let the computer do what it does best ;)

CSS

Use CSS3 background-size as mentioned by Juicy Scripter. Note that background-size is, however, a newer CSS attribute which won't work in older browsers (like < IE 8) and may require vendor prefixes in other browsers.

• MDN: background-size
• CSS3.info: background-size
• W3: background-size

HTML

Load the chess piece image with an actual img tag and change the width of that html element (downside is this will probably cause reflows that might slow down page rendering or cause flickering or other undesirable weirdness). You'll probably need to use different positioning techniques (like position, z-index, etc.) depending on your implementation.

Manual

Just make the images physically smaller. I think this is, in the end, the best (albeit the most time-consuming) option as it will allow you to retain maximum control over the quality of the images. Different browsers may unpredictably resize the images in different ways (depending on how they handle resizing), whereas if you resize them yourself, you're guaranteed that the images are presented in the way you intend.