将表格单元格中的背景图像转换为img标签，而不会产生任何样式差异

Question

我在新闻通讯中有一张桌子，并且我有这样的td

<td style="background:lightgrey;
background: url(https://dummyimage.com/700x600/666/fff.png)no-repeat center center;
background-size: cover;"
class="squares-image">
</td>

我想要的是这个：

<td style="background:lightgrey;" class="squares-image">
    <img src="https://dummyimage.com/700x600/666/fff.png">
</td>

并且具有完全相同的结果。我该怎么办？

Answer 1

[结合使用position:absolute和object-fit

td {
  padding:20px 40px;
  position:relative;
}
td img {
  position:absolute;
  top:0;
  width:100%;
  left:0;
  height:100%;
  object-fit:cover;
}

<table>
  <tr>
    <td style="background:lightgrey;
background: url(https://dummyimage.com/700x600/666/fff.png)no-repeat center center;
background-size: cover;" class="squares-image">
    </td>
  </tr>
</table>

<table>
  <tr>
    <td style="background:lightgrey;" class="squares-image">
      <img src="https://dummyimage.com/700x600/666/fff.png">
    </td>
  </tr>
</table>