html - 如何适应 td 中的背景图像

Question

我正在尝试将背景图像放入表格单元格 (td)，但由于图像比单元格大，我只能看到背景图像的一部分。

html 看起来像这样:

<tr>
  <td class="active"></td>
  <td class="passive"></td>
</tr>

在我使用这个 css 的类中:

background-image: url('../Images/prospectAct.png');
width: 100%;
height: auto;

<td>宽度为 8%，我可以使图像适合单元格。有什么我可以测试的例子吗？

Answer 1

您可以使用background-size:contain;

td {
  width:100px;
  height:100px;
}
  td.active {
    background-image:url('http://placehold.it/200x200');
    background-size:contain;
  }

<table>
  <tr>
    <td class="active"></td>
    <td class="passive"></td>
  </tr>
</table>