Question

我目前正在我的出站电子邮件中生成图像可视化。我遵守从here读取的550 - 600像素电子邮件宽度标准。我有一些可视化的表格，在某些时候，它们可以有超过10列，如果我想展示一切，它需要超过600像素。

我想要尊重600像素的宽度，我想知道是否有可能有1200像素的图像，但它包含在600像素的宽度中，有一个水平滚动条，所以图像尊重600宽度规则，但它们仍然可以水平滚动以显示整个宽度。

我真的没有太多的代码，但这是我的电子邮件中使用的内联样式，我用以下方法对宽度进行硬编码：

style="position: relative; height: 600px; width: 600px;"

Answer 1

添加溢出属性

style="position: relative; height: 600px; width: 600px;overflow-x:scroll"

如果只有当图片的宽度大于600px时才需要出现水平滚动条，请将overflow-x属性设置为auto。如果您需要水平和垂直滚动条，请使用overflow属性。

Answer 2

支持overflow CSS属性is not great in email clients。如果您的列表中有很多iOS，Apple Mail和Webmail用户，则可以使用overflow封装<div>的{{1}}属性。

<table>

但这不适用于Outlook，Android和其他人。

另一个选项：您是否能够在链接的电子邮件中显示缩小图像到浏览器中的完整版本？

<div style="overflow-x: auto;">
    <table>
        <!-- Your data -->
    </table>
</div>

电子邮件中的图片可能不是100％清晰，但布局不会破坏，体验也应该很好。