使表中的图像占用所需的空间

Question

当我创建如下所示的HTML表时，图像将占用比所需更多的空间。有没有办法防止这种情况？

＆＃13;

＆＃13;

td {
  border: 1px solid black;
}

＆＃13;

<table style="border-collapse: collapse">
  <tr>
    <td>Test</td>
    <td><img src="https://picsum.photos/1499/1000" width="10%"></td>
    <td>Text</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将display: block;添加到您的css中的img标记

td {
  border: 1px solid black;
}

img {
  display: block;
}

<table style="border-collapse: collapse">
  <tr>
    <td>Test</td>
    <td><img src="https://picsum.photos/1499/1000" width="10%"></td>
    <td>Text</td>
  </tr>
</table>

Answer 2

如果您指的是中心“td”的宽度并应用

，则将宽度应用于“td”

img {
  max-width: 100%
}

假设我们将宽度10％或100px应用于“td”，如

.td-class {
   width: 100px;
 }

我们会得到我们想要的结果。