Mailchimp

Question

我正在为客户编写 mailchimp 模板，我运行遇到图像尺寸问题

问题是宽度大于模板宽度（通常为 600 像素）的图像在 outlook 中以原始大小显示。我可以相信我的用户能够处理这样的弱点。

有一种方法可行，那就是如果将图像尺寸硬编码到 img-tag 中，尽管在 mailchimp 中更改图像时，硬编码的属性会超出范围。 -所以这不全是微软的错。

我最接近的解决方案是在这里找到的： - 但 OP 自己接受的答案是不完整的。

有什么聪明的建议吗？现在花了几天时间开始不信任。

我试过了，应该是万无一失的，但是当用石蕊测试它时，它在 Outlook 2010 及以下版本中崩溃了：

 <!-- content1 -->
    <table mc:repeatable mc:variant="Section: item with image top and CTA" width="300" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:300px;">
        <tr>
            <td bgcolor="#FFFFFF" width="100%">
                <table width="100%">
                    <tr>
                        <td width="100%">
                            <img mc:edit="article_image" src="https://gallery.mailchimp.com/3517b92e77c79cf5a2a6072a3/images/c37645eb-f76b-44e9-88ab-f01b1929dda2.jpg" id="contact-photo" alt="" style="width:100%; max-width:100%;" width="300">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table> 
<!-- end content1 -->

Answer 1

我认为你的问题可能与这个有点相似

我遇到了和你一样的问题。不幸的是，经过许多小时调试和搜索网络后，我在 MailChimp post 上阅读了以下内容：

Outlook doesn’t recognize the HTML that constrains images. This means that if you use HTML to resize an image uploaded to a campaign or template, it may display at the original size in Outlook. Be sure to resize your images before you upload them to MailChimp, or use our built-in image editor.

来源：MailChimp Knowledge Base

我真的不相信这是真的所以我一直试图限制图像。我在 img、td、tr、table.. 上设置了固定宽度。没有任何帮助。

遗憾的是我无法真正解释发生了什么，希望 MC 文章的 link 能让您更好地了解它。但我最好的答案是无论如何都要为你的 img 和 td 设置一个 max-width & width 。并告诉您的客户将图像调整为允许的大小。当鼠标悬停在 MailChimp 编辑器中的 editable 图像上时，设置 max-width 和宽度也会显示 #px。我还发现，当您上传更大的尺寸时，MailChimp 会发出一个小小的警告。

如果有任何帮助；请参阅下面我在模板中使用的代码以使其流畅。

<table mc:repeatable mc:variant="Item with image top and CTA" width="650" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:650px;">
<tr>
  <td style="padding:30px 20px 40px 20px;" bgcolor="#FFFFFF">
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td style="padding-bottom:15px;max-width:610px;">
          <img src="/images/img.jpg" alt="x" style="width:100%; max-width:610px;" width="610" mc:edit="article_image">
        </td>
      </tr>
    </tr>
  </table>
</td>

Mailchimp - 限制 outlook 中的图像尺寸

Mailchimp - constrain image dimensions in outlook

html

css

image

outlook