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

Question

我需要高度为 100 像素的横幅。和它里面的 img，高度为 120px。所以图片以 20px 的价格出现在我的横幅上；它用于电子邮件。我还需要图片前的文本列，以便列中的文本具有背景 f4f4f4

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

Answer 1

我添加了颜色，因此您可以看到它在 table 之外。我给图像设置了 120px 的高度，auto 的宽度。使 td 的最大高度为 100 像素；我在图片上留下了 -20 像素的边距。

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

Answer 2

您可以通过两种方式做到这一点，一种是将图像一分为二，另一种是使用另外两个 table。我添加了下面的代码，供您决定要使用哪一个。

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

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

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

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

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

让我知道哪个选项最适合您。

** 更新 **

您的问题是选项 1 是否可以左图右文字，示例如下：

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

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

How can i achieve img coming out from border. email templates?

html

css

html-email