Question

当我开始编写响应式电子邮件时，我注意到HTML表格行中连续的图像（所有具有相同的原始高度）在响应缩放时并不总是保持相同的高度。这对我来说是个大问题，因为我正在处理的电子邮件布局图像很重，必须紧密对齐。不均匀的高度图像打破了布局。我最终提出了这里提出的解决方案：http://am-samples.gear.host/iPhone5S-iO7-issue.html

导航到该URL并调整浏览器大小以查看响应式扩展操作。

如果您无法导航到上面的网址，以下是主要摘要：

具有连续图像的表格

<table class="100p" width="100%" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#7fff00" style="background-color: #7fff00;">
    <tr>
        <td class="100p" align="center" width="100%" valign="top">
            <div>
                <table class="100p" width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td class="100p" width="100%" align="left" valign="top">
                            <span width="26.09375%" style="width: 26.09375%; display: inline-block;">
                                <img id="ourStory" class="responsiveImage" src="http://am-samples.gear.host/images/bottom-our-story.png" border="0" style="display: block;" />
                            </span><span width="19.6875%" style="width: 19.6875%; display: inline-block;">
                                <img id="recipes" class="responsiveImage" src="http://am-samples.gear.host/images/bottom-recipes.png" border="0" style="display: block;" />
                            </span><span width="25.15625%" style="width: 25.15625%; display: inline-block;">
                                <img id="seafood" class="responsiveImage" src="http://am-samples.gear.host/images/bottom-seafood.png" border="0" style="display: block;" />
                            </span><span width="29.0625%" style="width: 29.0625%; display: inline-block;">
                                <img id="giftCards" class="responsiveImage" src="http://am-samples.gear.host/images/bottom-giftcards.png" border="0" style="display: block;" />
                            </span>
                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>

引用的CSS类

.responsiveImage {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    border: none;
}

*[class="100p"] {
                width: 100% !important;
                height: auto !important;
}

为了清楚地呈现问题，我已将代码删除到基本要素。如果您查看源代码，您会看到顶部和底部黑色条带只是具有黑色背景颜色的表格。红色条带实际上由连续的图像组成。所有图像的原始高度是相同的。因此，我预计所有图像的高度均匀缩放。包含图像的表格背景颜色为荧光绿色。这样，在Litmus中，很容易看出任何图像的高度是否不同。

我在Litmus中测试了这个解决方案，它对我感兴趣的电子邮件客户端工作正常，除了两个：iPhone 5S（iOS7和iOS8）。以下是iPhone 5S和iOS7中结果的屏幕截图（iOS 8产生了类似的结果）：http://am-samples.gear.host/images/iPhone5S-iOS7-issue.jpg

所以问题在于缩放时，有时图像高度并不完全相同。有关如何在iPhone 5S上解决这个问题的想法吗？

Answer 1

具有相同高度的不同宽度使图像具有不同的比例，这意味着当它们通过100％w x auto h收缩时，它们的高度会有所不同。

要通过移动设备保持一致的高度/宽度，我会确保比例相同。例如。使所有图像100px x 50px。（如果你愿意，可以在这里使用百分数）

我能看到的唯一另一个选项就是定义的高度来强制每个人达到这个数量，但在HTML电子邮件中，电子邮件客户端处理器不太可能遵循这个选项。

iPhone 5S iOS7响应式电子邮件连续图像高度问题

1 个答案: