Question

不幸的是，我无法获得国际象棋棋子的图像来填充我制作的棋盘。棋盘看起来不错，但是我已经创建了一个代码来创建一个主教。我试图在第二列的方块上添加主教的每一个主教。不幸的是，我在每个瓷砖的中心都有一个非常小的主教！这是我的造型，.td1 =白色方块，.td2 =普通棋盘上的黑色方块。

image 
{
    position : relative;
    max-width : 100%;
    max-height : 100%;
    height : 100%;
}

table 
{
    border-collapse : collapse;
}

.td1 {
    padding: 10px;
    margin : 0px;
    background-color : gray;
     border-style: solid;
     border-width: 1px;
     border-color : black; 
     position : relative; 
     width : 12px;
     height : 12px;
}


.td2
{
    padding: 10px;
    margin : 0px;
    background-color : yellow;
     border-style: solid;
     border-width: 1px;
     border-color : black;
     position : relative;
     width : 12px;
     height : 12px; 
}

这是javascript代码，我添加了一个额外的if语句，稍后会更改，在第二列上每隔一个插入一个主教图像。

    for (x=0; x<rows; x++)
    {
        board +="<tr>";
        for (y=0; y<cols;y++)
        {
        switch1 = x%2;
        if (y==1 && y%2 == switch1) //just for test purposes
            board +="<td class=\"" + "td1\">"   + "<img src=\"white bishop.png\" width=12px height=12px>" /<---add image here.
        else if (y%2 == switch1)
          board +="<td class=\"" + "td1\">" ; 
        else 
          board +="<td class=\"" + "td2\">";
        }
        board +="</tr>";
    }

<link rel="stylesheet" href="styles.css">
<script src="sample.js" src="model.js"></script>
<script src="model.js"></script>
</head>


<body onload ="start()">
 <table>
<div id ="gridDiv"> </div>
 </table>
</body>

Answer 1

width元素的HTML属性height或<img>获取以像素为单位的值，例如width=100。没有其他允许的值，例如%或em，因此您不需要也不必将px添加到您的值中。

将board +="<td class=\"" + "td1\">" + "<img src=\"white bishop.png\" width=12px height=12px>"更改为board +="<td class=\"" + "td1\">" + "<img src=\"white bishop.png\" width=12 height=12>"并尝试一下。

简单的棋盘与Javascript

1 个答案: