How to make background image shrink proportionally

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

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

Answer 2

Perhaps try adding position:relative and background-color:transparent to the button's style, then use a div inside the button tag setting the top and left to 0px. Inside this div please a tag for the button graphic with the style set to the new width/height (40px).

Might not need to use absolute position for the graphic if you don't want to put anything on top of it. If you do, use z-index on the div to move it behind any text, etc...

Give that a go. Hope it works! :D

Answer 3

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.

Answer 4

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