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.

我得到这样的作品 -

enter image description here

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

Answer 1

大多数现代浏览器都支持background-size之类的CSS background-image options，因此您可能会使用以下内容：

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％;

Answer 3

如何做到这一点有不同的选择，但如果是我，我会实际调整实际图像文件的大小，以保持对图像质量的最佳控制。如果有很多文件，这在Photoshop（或您使用的任何图像编辑器）中都很费时间，那么请使用您最喜欢的脚本语言与ImageMagick配对并让计算机执行它所做的事情最好;）

CSS

使用Juicy Scripter提到的CSS3 background-size。请注意，background-size是一个较新的CSS属性，在旧版浏览器中不起作用（如＆lt; IE 8），可能需要在其他浏览器中使用供应商前缀。

HTML

使用实际的img标签加载国际象棋棋子图像并更改该html元素的宽度（缺点是这可能会导致回流，这可能会减慢页面渲染速度或导致闪烁或其他不受欢迎的怪异现象）。您可能需要使用不同的定位技术（例如position，z-index等），具体取决于您的实施。

手册

只需将图像缩小。我认为这最好是（尽管是最耗时的）选项，因为它可以让你保持对图像质量的最大控制。不同的浏览器可能会以不同的方式无法预测地调整图像大小（取决于它们如何处理调整大小），而如果您自己调整大小，则可以保证图像以您想要的方式呈现。

Answer 4

也许尝试将position:relative和background-color:transparent添加到按钮的样式中，然后在按钮标记内使用div设置top和left到0px。在这个div中，请为按钮图形添加标签，样式设置为新的宽度/高度（40px）。

如果你不想在图形上放置任何东西，可能不需要使用图形的绝对位置。如果你这样做，请在div上使用z-index将其移到任何文本后面等等......

放手一搏。希望它有效！：d

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

4 个答案:

CSS

HTML

手册