У меня есть изображение внутри относительно сложной структуры таблицы и внутри тега td. Я пытаюсь сделать так, чтобы при просмотре страницы на мобильном устройстве изображение немного уменьшалось по сравнению с просмотром на рабочем столе, т.е. в идеале я хочу, чтобы оно составляло 50% ширины страницы.
Я пробовал добавить max-width в тег img, а также тег tg за его пределами, и ни один из них не работал.
Мой код:
<html>
<table bgcolor="#efefef" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<![endif]-->
<table width="100%" class="maxW" style="max-width: 600px; margin: auto;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="center">
<table width="94%" border="0" cellpadding="0" cellspacing="0" style="padding-bottom:10px">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table width="94%" border="0" cellpadding="0" cellspacing="0" style="padding-bottom:10px">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="middle" style="font-family:Helvetica, Arial, sans-serif; font-size: 12px; color: #353535; padding:3%; padding-top:5px; padding-bottom:5px;">
.........
</td>
</tr>
<tr>
<td align="center" valign="middle" style="padding:1%; padding-top:10px; padding-bottom:5px;"><a href="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="max-width: 50%"></img></a></td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</html>