Question

我需要高度为100px的横幅。和img里面的高度120px。因此，图片显示我的横幅为20px; 它用于发送电子邮件。此外，我需要在图片之前的文本列，以便在背景f4f4f4

列中的文本

<table>
   <tr>
      <td>
         <img src="" style="margin-top:-20px;" />
      </td>
      <td>
        banner text here
      </td>
   </tr>
</table>

Answer 1

您可以通过两种方式执行此操作，一种方法是将图像切片为两种，另一种方法是使用另外两种方法。我已经添加了下面的代码供您决定使用哪一个。

选项1：此选项将图像作为一个整体放置在具有3列的外部表中。外面的两列有一个白色背景的桌子，以迎合从灰色区域弹出的头/帽。我已将表格宽度设置为100％以显示它的外观。

＆＃13;

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
  <td valign="top" bgcolor="#f4f4f4">
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
		  <tbody>
			<tr>
			  <td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
			</tr>
		  </tbody>
		</table>
</td>
  <td width="171" valign="top"><img src="http://i67.tinypic.com/sdk1hh.jpg" width="171" height="178" style="display: block;"></td>
  <td valign="top" bgcolor="#f4f4f4">
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
		  <tbody>
			<tr>
			  <td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
			</tr>
		  </tbody>
		</table>
</td>
</tr>
</tbody>
</table>

＆＃13;

选项2 对于此选项，您需要切片图像的顶部（白色背景）并将图像放在一个包含两行的表中。两个图像都居中，我将表格宽度设置为100％，以显示它的外观。

＆＃13;

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td align="center" valign="top" bgcolor="#ffffff"><img src="http://i64.tinypic.com/lz7f6.png" style="display: block;">
</td>
    </tr>
    <tr>
      <td align="center" valign="top" bgcolor="#f4f4f4"><img src="http://i68.tinypic.com/4qo1mu.png" style="display: block;"></td>
    </tr>
  </tbody>
</table>

＆＃13;

两个代码的最终结果应如下所示：

让我知道哪种方案最适合您。

** 更新 **

您的问题询问是否可以在左侧显示带有图像的选项1，在右侧显示文字，以下是示例：

＆＃13;

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
  <td width="171" valign="top" style="padding-left:20px;"><img src="http://i67.tinypic.com/sdk1hh.jpg" width="171" height="178" style="display: block;"></td>
  <td valign="top" bgcolor="#f4f4f4">
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
		  <tbody>
			<tr>
			  <td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
			</tr>
      <tr>
      <td style="font-family:Arial; font-size:12px; color:#000000; padding:5px 10px;">This is some text for your email</td>
      </tr>
		  </tbody>
		</table>
</td>
</tr>
</tbody>
</table>

＆＃13;

Answer 2

我添加了颜色，所以你可以看到它在桌子外面。我给图像的高度为120像素，宽度为自动。使得td的最大高度为100px;我在图像上留下了-20px的边距。

＆＃13;

<body style="background-color:pink">
<table style="background-color:orange;">
   <tr>
      <td style="max-height:100px; overflow-y:initial;">
         <img src="https://i.imgur.com/ZESO4DT.png" style="margin-top:-20px; height:120px; width:auto;" />
      </td>
      <td style="max-height:100px;overflow-y:initial;">
        banner text here
      </td>
   </tr>
</table>
</body>

＆＃13;

我怎样才能实现从边境出来的img。电子邮件模板？

2 个答案: