圖像背景拉伸整個表格單元格

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;
}