我在一个相对复杂的表结构和一个td标记中得到了一个图像。 我试图使图像的响应，以便当页面是在移动端查看时，图像稍微缩小比在桌面上查看时，即理想情况下，我希望它是50%的宽度页面。
我尝试在img标记上添加一个max-widts，并在其外部添加一个tg标记，但似乎都不起作用。
我的代码:
null
<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>null
您可以尝试对表中的每一列执行display:inline-block。 当屏幕宽度减小时，它将使列向每列下方移动，并使trtext-align:center；
