如何使背景图像按比例缩小以适应javascript中的按钮大小？

Question

我在javascript中制作棋盘.棋盘的正方形(按钮)最初设计为60px乘60px,但现在它们是40px乘40px.

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

然而,为这个早期棋盘设计的一些棋子仍然是60px乘60px.在Javascript中是否有任何方法可以使图像按比例缩小以适合方形尺寸？目前,图像符合方形尺寸,但不缩小,所以当我说,

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

我得到这样的碎片 -

如果WhiteKing.jpg按比例缩小,它就会很合适.有没有办法在Javascript中执行此操作？任何帮助将非常感激.

Answer 1

大多数现代的浏览器对CSS的支持背景图片的选项一样background-size,所以你可能会真正使用是这样的:

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 */
}

当然你也可以在JavaScript中使用它(但最好将它添加到现有的CSS按钮中):

square.style.backgroundSize = '100%';

Answer 2

您将要使用：背景尺寸：100%；