Преобразование фонового изображения в ячейке таблицы в тег img без изменения стиля

Question

У меня есть таблица в новостной рассылке, и у меня есть тд вроде этого

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