html - 响应式 eBlast 的 Outlook 2007、2010 和 2013 中的最小宽度最大宽度

Question

我正在为客户制作 eBlast (it can be found here)

一切看起来都不错，除了这位先生的底部图片，在 Outlook 中它被放大到一个巨大的尺寸。

我在某些 Outlook 电子邮件服务中遇到问题。 eBlast 通过了所有 Litmus 测试但 Outlook 2010 和 2013，当我进一步研究这个问题时我发现这是因为 Max-width 和 min-width 在 Outlook 中并不重要，因为它不读取该代码。

任何人都可以看看这段代码并提出一些我可以应用于 eblast 底部图像的修复建议，它目前位于此代码块中:

<table style="border-spacing: 0;border-collapse: collapse;vertical-align: top" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr style="vertical-align: top">
    <td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top;width: 100%;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px" align="center">
        <div style="font-size:12px" align="center">
        <img class="center" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block;border: none;height: auto;line-height: 100%;margin: 0 auto;float: none;max-width: 146px" align="center" border="0" src="http://www.lonebeacondevelopment.com/images/jfir.jpg" alt="Image" title="Image" style="max-width:146px !important; width:50%">
        </div>
    </td>
</tr>

我将永远感激，谢谢。

Answer 1

如果您打算以任何一种方式设置最大宽度，为什么不继续将图像的大小设置为最大宽度，或者从一开始就将其设置为预先确定的宽度。

这样一来，您的备用方法是加载最大的图像，因为 Outlook 将忽略该最大宽度并显示完整图像。

由于您不会超过 600 像素，因此无论是对其进行硬编码还是仅调整实际的全尺寸图像而不是尝试使用 css 调整尺寸，都不应该有任何问题。