如何在 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>