如何在鼠标悬停时将表格单元格放大到其背景图像的大小？

Question

我设置了一个图片库，其中图片在每个单元格中部分显示（作为预览）作为单元格背景。当鼠标移到单元格上时，单元格会扩展到整个图片的大小。我想知道是否有一种方法可以自动将单元格大小调整为图像尺寸，而不是手动将完整尺寸输入为鼠标悬停时单元格的高度和宽度。我已经尝试将 height='200px' 替换为 height=auto 或 height=100% 但似乎都不起作用。

下面是代码示例：

<table cellpadding="0" border="0">  
        <tr>
            <td width="275px" height="200px" onmouseover="width='400px'; height='268px'" style="background-repeat:no-repeat" 
            class="fx" onmouseleave="width='275px'; height='200px'" align="center" background="images/kitchen/1.jpg"></td>

            <td width="275px" height="200px" onmouseover="width='400px'; height='268px'" style="background-repeat:no-repeat" 
            class="fx" onmouseleave="width='275px'; height='200px'" align="center" background="images/kitchen/2.jpg"></td>

            <td width="275px" height="200px" onmouseover="width='400px'; height='268px'" style="background-repeat:no-repeat" 
            class="fx" onmouseleave="width='275px'; height='200px'" align="center" background="images/kitchen/3.jpg"></td>
       </tr>
</table>

Answer 1

您可能想看看或尝试一下 transform :scale(); （无碰撞效果）

table {
  table-layout:fixed;
  margin:auto;
  width:550px;
  }
td {
  width:275px;
  height:200px;
  background:url(http://dummyimage.com/400x268) center no-repeat;
  transition:0.25s;
  box-shadow:inset 0 0 0 2px;
  }
td:hover {
  background-size:  100% 100%;
  transform:scale(1.4545,1.34);
  transform-origin:center;
  }
body {
  text-align:center;

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  </table>
<img  src="http://dummyimage.com/400x268" />