0

我第一次使用 Zurb Ink 创建模板;很好,但我无法解决某个问题。

当我在浏览器中查看 HTML 时,一切正常,但不幸的是,我需要通过一个发送平台发送我的电子邮件,该平台可以随意调整我编写的代码。

我遇到的问题是图像大小。出于某种原因,我正在使用的一个 580 像素宽的图像在通过电子邮件平台发送时其自身大小为 576 像素。我反复查看了代码并在网上查了一下,但我找不到任何东西,所以非常感谢您的帮助。

<!--header row-->
<table class="row header-bar" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; background: #4480ba; padding: 0px;" bgcolor="#4480ba">
    <tbody>
        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
            <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
                <table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
                    <tbody>
                        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                            <td class="nine sub-columns" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; min-width: 0px; width: 75%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="left" valign="top">
                                <img style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 80%; float: left; clear: both; display: block; padding-left: 10px; padding-right: 10px; margin-left: 5px; margin-right: 5px;" class="text-pad alumni-logo" src="" alt="" width="237" height="80" align="left" />
                            </td>
                            <td class="three sub-columns" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; min-width: 0px; width: 25%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="left" valign="top">
                                <img style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 100%; float: none; clear: both; display: block; margin: 0 auto;" class="center" src="http://www.jampaper.com/userFiles/productImages/tn_02561_Orange_6_1_2_x_6_1_2_Square_Envelopes.jpg" alt="" width="80" height="80" align="none" />
                            </td>
                            <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top">
                                &nbsp;
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
<!--/header row-->
<!--big image row-->
<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
    <tbody>
        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
            <td class="wrapper last intro-image" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0 0px 0px;" align="left" valign="top">
                <table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
                    <tbody>
                        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                            <td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 0px 10px;" align="left" valign="top">
                                <img style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 100%; float: none; clear: both; display: block; padding-top: 0 !important; margin: 0 auto;" class="center intro-image" src="http://www.nagelphotography.com/img/s2/v4/p176518365-3.jpg" alt="" width="580" align="none" />
                            </td>
                            <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top">
                                &nbsp;
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
<!--/big image row-->

我知道这可能有点远,但是当屏幕足够宽以支持它时,我真的无法弄清楚为什么这张图片不是 580 像素。作为参考,在较小的尺寸下问题仍然存在,但不同之处在于像素数量较少。

4

1 回答 1

0

如果将来有人遇到这个问题 - 您可能有兴趣知道图像不符合要求的原因是下面的扩展单元占用了空间,因为该字符是由电子邮件平台添加的正在使用。通常在墨水扩展器中根本没有尺寸。

于 2015-08-13T11:44:46.160 回答