电子邮件间距中的动态图像答案

【问题标题】：Dynamic Images in Email spacing电子邮件间距中的动态图像
【发布时间】：2023-04-03 21:52:01
【问题描述】：

我正在构建一封电子邮件，其中每个月将有 3 张图片加载促销优惠。有些月份可能只有 2 个优惠，而代替第 3 张图片的想法是只保存一个 1x1 spacer.gif，以便非开发人员可以更新促销图片。

问题是，如果我没有为每个图像设置特定的高度，当替换 spacer.gif 时，浏览器会将其显示为一个巨大的间隙，基本上高度与宽度相同。

有谁知道我该如何解决这个问题，所以没有这么大的差距，但我不必在那里锁定高度？

以下是相关代码：

<table width="700" align="center" bgcolor="#000000" cellpadding="0" cellspacing="0"    border="0" style="min-width:700px">
            <tbody>
                <tr>
                    <td><img src="images/spacer.gif" width="40" height="1" border="0" style="display:block; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;"/></td>
                    <td>
                    <table width="620" align="center" bgcolor="#000000" cellpadding="0" cellspacing="0" border="0" style="min-width:620px">
                    <tbody>
                        <tr>
                            <td>
                            <!-- Offer 1 -->
                            <a href="" title="Offer" target="_blank"><img src="images/cm_spof_01.gif" width="620" alt="Offer" border="0" style="display:block; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; font-size:16px; color: #f1f1f1; font-family:arial, sans-serif; height:auto;" /></a>
                            <!-- Offer 2 -->
                            <a href="" title="Offer" target="_blank"><img src="images/cm_spof_02.gif" width="620" alt="Offer" border="0" style="display:block; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; font-size:16px; color: #f1f1f1; font-family:arial, sans-serif; height:auto;" /></a>
                            <!-- Offer 3 -->
                            <a href="" title="Offer" target="_blank" style="height:auto;"><img src="images/cm_spof_03.gif" width="620" alt="Offer" border="0" style="display:block; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; font-size:16px; color: #f1f1f1; font-family:arial, sans-serif; height:auto;" /></a>
                            </td>
                        </tr>
                    </tbody>
                    </table>
                    </td>
                    <td><img src="images/spacer.gif" width="40" height="1" border="0" style="display:block; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;"/></td>
                </tr>
            </tbody>
        </table>

【问题讨论】：

标签： html image email

【解决方案1】：

让你的 1x1 gif 更宽，比如 600x1。

此外，您可以关闭所有图像标签的高度，例如，这是创建流体图像的方法：

<img alt="" src="" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">

【讨论】：

太简单了，不知道为什么以前没看到。本质上，我不需要使 gif 更宽。我刚刚删除了高度和宽度，它似乎在试金石中测试正常。