将png图像放在表格中

Question

嗨，我知道这是一个简单的问题。但我无法做到。我想把图像放在一张桌子里。在新的html文件中一切正常。但是当我试图在我的项目文件中插入表格时，图像会重叠。它们不适合表格。我做错了什么？请看附上的图像。

table,td,th {border: 3px solid black;padding: 15px}

<table>
      <tr><th>Choose from the icons</th></tr>
      <tr><td ><img src='http://www.freeiconspng.com/uploads/smiley-icon-1.png' width='20%'/></td></tr>
      <tr><td ><img src='http://www.freeiconspng.com/uploads/smiley-icon-1.png'width=20%/></td></tr>

    </table>

Answer 1

尝试：

table,
td,
th {
  border: 3px solid black;
  padding: 15px
}
img.icon {
  width: 20%;
  height: auto;
}

<table>
  <tr>
    <th>Choose from the icons</th>
  </tr>
  <tr>
    <td>
      <img src='heart1.png' class="icon" />
    </td>
  </tr>
  <tr>
    <td>
      <img src='heart1.png' class="icon" />
    </td>
  </tr>
</table>

Answer 2

这可能有效。如果您有任何疑问，可以发表评论并进一步询问。 此解决方案可将您的图片修复为<td>

table,
td,
th {
  border: 3px solid black;
  padding: 15px
}
td img {
  max-width: 100%;
  height: auto;
}

<table>
  <tr>
    <th>Choose from the icons</th>
  </tr>
  <tr>
    <td>
      <img src='heart1.png' class="icon" />
    </td>
  </tr>
  <tr>
    <td>
      <img src='heart1.png' class="icon" />
    </td>
  </tr>
</table>

Answer 3

首先，您应该始终指定高度和宽度。

其次，您应指定宽度（以像素为单位）。 AFAIK，图像标记不支持百分比。

IMG tag

第三，你的第二张图片在宽度值附近没有引号。

理想情况下，您应调整图像大小以使其无法定义宽度和高度。

最好的方法是将图像设置为单元格的背景图像。