如何在 Mailchimp 模板中保留图像尺寸答案

【问题标题】：How to retain image dimensions in Mailchimp templates如何在 Mailchimp 模板中保留图像尺寸
【发布时间】：2015-09-19 20:46:26
【问题描述】：

我正在 Mailchimp 中创建一个模板来发送新闻通讯。该模板包含一个带有前缀大小的图像的可重复部分。出于某种原因，它会从 img 元素中去除 width="" 和 height="" 值，并且仅在您在每个图像的图像设置中手动设置它们时才包含它们。这意味着，如果用户上传了不同尺寸的图像并且没有手动输入正确的尺寸，那么在 Outlook 中图像会显示为完整尺寸。

为了让它在设计编辑器上更加不友好，它使用宽度/高度 css 样式来显示图像大小，因此它显示（例如）350 像素宽 x 234 像素高，您可以上传更大的图像它以 350px 的宽度显示（这会让用户认为它是正确的）。但是它不包括 html img 宽度/高度值，除非您手动指定它们，这意味着 Outlook 中的图像大小错误。

有谁知道至少强制将 html 宽度变量自动包含在 img 元素中？否则用户必须手动为每个图像手动设置相同的宽度/高度，如果他们忘记了，那么它将无法在 Outlook 中正确显示？

谢谢，

戴夫

【问题讨论】：

戴夫，我感受到了你的痛苦，遇到了同样的问题。

标签： html image email mailchimp

【解决方案1】：

对于其他人的参考，我现在已经与 mailchimp 交谈，并结合使用 https://www.snip2code.com/Snippet/25348/HTML-Email-Template--max-width-hack-for-（下）的代码和 img 的 max-width/max-height css 值修复了 Outlook 中的问题：

<!--[if (gte mso 9)|(IE)]>
<center>
  <table>
    <tr>
      <td width="600">
        <![endif]-->
        <div style="max-width: 600px; margin: 0 auto;">
          <p>This text will be centered and constrained to 600 pixels even on Outlook which does not support max-width CSS</p>
        </div>
        <!--[if mso]>
      </td>
    </tr>
  </table>
</center>
<![endif]-->

【讨论】：

您的代码中没有引用任何 IMG，您能否提供一下您是如何处理的？您发布的代码直接来自您链接的 sn-p！
在上面的div 中添加图像不会限制图像的大小 – Outlook 不关心包含的单元格是否为 600 像素宽，如果您将 900 像素宽（本机）图像插入到该单元格，在图像上没有width="600"，它将以其完整的原生 900 像素宽度显示。即使您将width: 100% 放在里面的图像上，它仍然会膨胀到其原始尺寸。

【解决方案2】：

要解决这个问题，您必须在实际图像本身上指定最大宽度，并确保它像这样内联到标签上：

<img mc:edit="image" src="image.jpg" width="200" style="max-width: 200px;">

如果它包含在头部的 CSS 中，则不算数。

我发现 max-width 需要是您在样式中指定的 VERY LAST 东西。因此，如果您还指定了背景，例如，您会将其放在首位，即background-color: #fcfcfc; max-width: 200px;。

上次我尝试这个时，MailChimp 编辑器只会在图像被编辑后添加width="200"，所以如果你单独留下占位符图像，它将没有应用宽度，因此保持原始大小。不幸的是，我不再确定是否是这种情况，而且我现在没有为 Mailchimp 付费，所以我无法检查。

【讨论】：