图像背景拉伸整个表格单元格

Question

如果我想设置一个完全符合表格单元大小的图像，应该怎么办？

我有一个1行3列的表。每列有1张图片。我试图放置width=33%, height=auto的属性，但图像显示仍然扭曲。

Answer 1

你可以用css来实现这个目的。

td table {
    background: url(path/to/background.png);
    background-size: contain;
} 

Answer 2

您需要使用background-size：contains，但要小心图像的比例和单元格的大小。

看下面的例子：

HTML：

<h2>
Test
</h2>

<table class="tab">
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

CSS：

.tab{
  border : 1px solid red;
}

.tab td
{
  color: red;
  font-size: 30px;
  font-weight: bold;
  text-align: center;

  width:200px;
  height:200px;
  background-image: url('https://static.fnac-static.com/multimedia/Images/FR/NR/8a/c9/89/9030026/1540-1/tsp20171113114257/Figurine-Pixel-Pals-Light-Up-Capcom-Street-Fighter-Ryu.jpg');
   background-position: center; 
   background-size: contain;
}