Html 如何使表单元格的子级div响应td大小

我试图让表单元格（tr、td格式）中包含的div根据响应表大小进行缩放。这是我当前的代码：

编辑：我使用的是position:absolute，因此div位于td内，而不影响单元格的大小，任何其他方式，div似乎将单元格从正方形变成矩形。我正在用这个布局做一个棋盘

由于某些原因，包含图像的div不会使用响应表单元格调整大小，因为响应表单元格的大小非常大，并且保持正方形。最终的结果是一个棋盘，图像元素中有60x60像素的图像。不确定图像是否无法缩小到某个特定的大小，或者是什么阻止了div的响应。

您应该尝试这样做

position:relative

---

不要使其绝对定位，尝试相对定位问题是，div的大小被添加到td的大小，因此表格从正方形变为矩形。然后尝试给td元素相对位置，因为绝对定位的元素相对于最近定位的父元素或表格元素定位，如果找不到，那就是Body我给了td relative并将div设置为absolute，并为图像本身添加了一个类，使其宽度：100%高度：auto，现在效果很好！非常感谢你的投入，你引导我找到了正确的答案！我有绝对位置，因为任何其他方式，div高度被添加到td高度，而不是位于td内部并保持方形。位置：相对将正方形转换为矩形。

<tr>
   <td>
      <div class="piece-image">
         <img src="/rk_wht.png/">
      </div>
   </td>
</tr>

position:relative