Лучший способ иметь как высокое разрешение изображения и текста в натянутых ячейках таблицы HTML?
Пытаюсь лучше задать вопрос. Вот пример того, что я пытаюсь сделать с помощью HTML-таблицы и встроенного стиля. Я занимаю клетки в двух верхних рядах. Я попытался использовать фоновое изображение вместе с размещением тега img внутри натянутых ячеек. У меня возникла проблема с возможностью указать ширину изображения, чтобы его можно было уменьшить до правильной ширины при использовании 2-кратного изображения с последующим наложением текста на изображение. Пока изображение растянуто на несколько ячеек.
Пример таблицы с макетом текста изображения
Фрагмент ниже - пример того, что я попробовал без удачи.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<table width="350" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="4" width="135">
<IMG src='image/2X_image.png' style="position: relative; width: 350px; height: 118;" width=350 height=118 border=0>
</td>
</tbody>
</table>
<span style="position: absolute; font-size: 20px; padding-bottom: 5%; line-height: 18px; font-weight: 700; font-family: serif color: #000000; left: 12px; top: 75px; width: 168px; height: -29px;">Bold Text<br>
<span style="font-size: 14px; line-height: 18px; font-weight: 500; ">Smaller Text</span></span>
</body>
</html>