Question

20

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

rated 0 times [ 22] [ 2] / answers: 1 / hits: 80121 / 12 Years ago, wed, february 29, 2012, 12:00:00

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 -

enter

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

quentinaveryb

Add To Favorites

Follow

Total Points: 102

Total Questions: 100

Total Answers: 93

Location: Colombia

Member since Mon, May 2, 2022

2 Years ago

quentinaveryb questions

1 How to use annotation layer in PDF.js?

Thu, Aug 6, 20, 00:00, 4 Years ago

1 Cannot assign to read only property of #< Object> using React with Recoil

Sat, Jul 18, 20, 00:00, 4 Years ago

1 Strapi JWT token lifetime?

Fri, Jul 17, 20, 00:00, 4 Years ago

1 What is the difference between async await and a regular fetch?

Tue, Feb 4, 20, 00:00, 4 Years ago

1 How do I include a JavaScript variable in an HTML header?

Mon, Aug 12, 19, 00:00, 5 Years ago

View All

answered 12 Years ago xiomara · Accepted Answer

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