如何在电子邮件正文中缩放图像？

Question

如何在电子邮件正文中缩放图像？

我正在电子邮件中添加html模板，其中包含一个图片。我希望该图片能够自适应电子邮件客户端的宽度，并且高度应根据图片宽度自动调整，效果如下图所示：

（图片）

需要在所有电子邮件提供商中均可使用。

值得一提的是，我正在开发ASP.NET应用程序。

编辑：

我将图片宽度设置为100％，但没有设置图片高度。这是最好或正确的方法吗？

- Pawan

---

祝你在使其与 所有 电子邮件客户端配合工作方面好运。你会失败的，除非其他情况下，Outlook 会阻止你。 - Uwe Keim

Answer 1

我会选择设置：

width: 100%;
height: auto;

演示：http://jsfiddle.net/gjtC9/ 没有CSS：http://jsfiddle.net/gjtC9/2/ 问题是这是否是最好和正确的方法... 如果有人在移动电话上打开电子邮件，分辨率会很小 - 所以巨大的图像会被缩小到更小的尺寸。

-> 手机将加载巨大的图像，这将被缩放到小型图像，这让我更加质疑，那张图片真的必要吗？您是否要在那里放置那些企鹅或一些具有信息或有价值的图像？:D

- Ms. Nobody

Answer 2

1. 使用内联样式，例如：<img style="width: 100%; height: auto;" ...

2. 确保你的 img 标签不在设置或限制图像高度的容器中。

3. 如果仍需要容器或与其他样式有困难，请使用 max-width 而不是 width。<img style="max-width: 100%" >

- Dmitry Kaigorodov

---

该电子邮件已经使用了100%的宽度，他没有足够的空间来显示图片。 - Afzaal Ahmad Zeeshan

Answer 3

在下面的图片中，您可以看到实际的电子邮件正文是从电子邮件“to”对象下方开始的。我不明白为什么您要做更宽的事情。

从您的图片中：您提供的图片，照片被正确缩放。它适合包裹它的div，从左到右。

在我的图片中：好吧，它只是一段文字，但是您可以看到文本是从“to”对象下方开始的。

结果：您无法将图像缩放或使其比此更宽。但是，我相信您了解当将宽度设置为100％时，浏览器实际上会从该宽度提供100％的宽度。超过此大小可能会在UI上造成一些问题，而gmail永远不会允许您这样做。

我希望您能理解我的意思。

- Afzaal Ahmad Zeeshan