Question

我有一个3x3表，看起来像这样：

<table>
  <tbody>
    <tr>
      <td id='a1'></td>
      <td id='b1'></td>
      <td id='c1'></td>
    </tr>

    <tr>
      <td id='a2'></td>
      <td id='b2'></td>
      <td id='c2'></td>
    </tr>

    <tr>
      <td id='a3'></td>
      <td id='b3'></td>
      <td id='c3'></td>
    </tr>
  </tbody>
</table>

Javascript（特别是jQuery / coffeescript）看起来像这样：

$(document).ready ->
  $("td").click ->
    $("<img src='download.jpg'/>").prependTo @

看起来像这样的CSS：

table {
  border-collapse: collapse;
  border: solid 1px #999999;
  box-shadow: 2px 2px 4px #cccccc;
  -moz-box-shadow: 2px 2px 4px #cccccc;
  -webkit-box-shadow: 2px 2px 4px #cccccc;
  width: 300px;
  height: 300px;
}

table th, td {
  padding: 3px;
  line-height: 13px;
  border-left: solid 1px #AAAAAA;
  border-bottom: solid 1px #AAAAAA;
}

img {
  max-width:100px;
  max-height: 100px;
  padding: 0px;
  margin:0;
}

当我点击一个单元格并且图像被预先添加时，我希望图像填充单元格而不是扭曲我的表格的大小。基本上我想把桌子和9个单元格锁定在它们当前的大小，并且图像前面没有对表格和单元格的大小/边框进行任何可见的改变。

目前，当我提前，表格偏斜，图像位于单元格的最左侧，前置单元格变得比其他所有单元格都大。

Answer 1

如果它们是固定大小，请尝试在width CSS上使用height和td，而不是max-width和max-height。看到这个小提琴：here。

Answer 2

如果所有图像尺寸相同，您可以在所有单元格中使用该尺寸的透明图像（100x100？），当有人点击时，您可以使用下载图像替换td的内容

限制前置img的大小。使用jQuery将img添加到td内后，大小变得偏斜

2 个答案: