Question

我有一个包含标题的HTML邮件。它可以正常工作，直到包含图像为止。标题比相对大小的表大。当我然后允许Outlook包含外部托管图像时，标题会导致父对象调整大小，这会搞砸整个事情。

List<Card>

我发现有几个网站说<table width="100%" border="0" cellpadding="0" style="font-family: Calibri;"> <tr> <td width="28%"> </td> <td width="44%"> <img src="http://www.domain.com/header.png" style="width: 100%; height: auto;">会修复它，但它没有。如何将图像放在父对象中而不是调整父对象的大小？

Answer 1

有一个空的最后一个单元格它对我来说很好，它允许表格所需的100％宽度

<table border="0" cellpadding="0">
  <tr>
    <td class="one"></td>
    <td class="two">
      <img src="http://lorempixel.com/500/250" alt="" />
    </td>
    <td class="empty"></td>
  </tr>

</table>


table{
  width:100%;
  background: grey;
  font-size:0;
}

.one{
  width:25%;
  background: blue;
}

.two{
  width:50%;
  background: green;
}

img{
  width: 100%; 
  height:auto;
}

https://jsfiddle.net/4822s7w2/

Answer 2

将表格宽度设置为固定值（例如250px）而不是100％，这是一个相对值。然后你可以相应地调整它的大小。
我还建议使用<div>而不是表格。

HTML邮件大小调整后的父对象中的图像

2 个答案: