Question

我试图通过HTML功能将我的.ai电子邮件发送到Constant Contact。但是，当我从Illustrator导出切片时，质量太低了。

我的解决方案是将切片导出为我需要的3倍，然后将其缩小到我需要的大小。我对CSS这样做比较熟悉，但这不适用于电子邮件。

1）这是最好的解决方案吗？ 2）如何在我的div标签内缩小图像？

这是div的一个例子：

<div style="background-image:url(https://origin.ih.constantcontact.com/fs135/1103573722880/img/236.png?ver=1395066771000); position:absolute; left:0px; top:0px; width:1000px; height:90px;" title="">
</div>

Answer 1

我不确定Illustrator是否有＆＃34;保存为网络＆＃34;选项，但Photoshop确实如此。如果你需要透明度，可以使用它并输出为jpg @ 80％质量或png-24。

关于编写电子邮件的几个要点：

虽然它们可以，但电子邮件不应超过600px以获得最大兼容性。
所有浏览器http://www.campaignmonitor.com/css/
在Photoshop / Illustrator中保存图像时，请确保它们的大小适合您想要渲染的尺寸。 Photoshop / Illustrator可以更有效地实现这一目标，提高质量，并且可以防止浏览器和电子邮件客户在这个过程中做一些糟糕的工作并丢失图像质量。

Answer 2

在布置您的电子邮件时，最好一起避免div，并回到经过验证的table布局，并根据需要在图片单元格中放置图片标记。

这消除了在某些浏览器中不出现背景图像的担忧。可以找到建立良好模板的良好资源 here

Answer 3

最简单的方法是使用background-size标记。我还发现添加no-repeat值永远不会受到伤害。所以你的代码应该是这样的：

<div style="background-image:url('images/image.png'); background-size: 1000px 90px; background-repeat: no-repeat; position:absolute; left:0px; top:0px; width:1000px; height:90px;" title="">

Answer 4

在电子邮件中你不应该使用div ....使用普通的img - 标记

<img src="https://origin.ih.constantcontact.com/fs135/1103573722880/img/236.png" width="800" height="72" alt="" style="max-width:100%;">

务必设置width和height！

div标签内图像的在线缩放

4 个答案: