Html 将水平滚动条应用于电子邮件中的宽图像

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

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

我没有太多的代码，但这是我的电子邮件中使用的内联样式，我用它硬编码宽度：

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

---

添加溢出属性

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

如果仅当图像宽度大于600px时才需要显示水平滚动条，请将overflow-x属性设置为自动。 如果同时需要水平和垂直滚动条，请使用overflow属性

对溢出CSS属性的支持。如果您的列表中有很多iOS、Apple Mail和webmail用户，那么您可以在包装邮件的上使用overflow属性

但这对Outlook、Android和其他系统不起作用

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

<a href="link-to-full-res.png">
    <img src="" width="600" height="" alt="alt_text" border="0" style="width: 100%; max-width: 600px; height: auto;">
</a>

---

该图像在电子邮件中可能不是100%清晰可见，但布局不会中断，体验应该很好。

能否设置一个属性，使其仅在图像具有一定宽度（即大于600像素）时才生效？请尝试overflow-x:auto@绿色卷心菜如果你将图像包装在一个div元素中，并给该元素一个固定的宽度/高度，你所要做的就是设置溢出：auto；

<a href="link-to-full-res.png">
    <img src="" width="600" height="" alt="alt_text" border="0" style="width: 100%; max-width: 600px; height: auto;">
</a>