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

Question

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

我在电子邮件中添加了html模板。该模板中有一个图像。

我想，图像应该根据电子邮件客户端宽度进行调整。高度应根据图像宽度进行调整。这样的事情： -

它应该适用于所有电子邮件提供商。

仅供参考，我正在开发ASP.NET应用程序。

编辑：

我将图像宽度设置为100％，而我没有在那里设置图像高度。

这是最佳或正确的方法吗？

Answer 1

我会去设置：

width: 100%;
height: auto;

演示：http://jsfiddle.net/gjtC9/ 没有CSS：http://jsfiddle.net/gjtC9/2/

这个问题是否是最好和最正确的方式..如果有人在手机上打开电子邮件，其分辨率非常小 - 那么巨大的图像会缩小到相当小的范围。

- ＆GT;手机将加载巨大的图像，将缩小到小 - 这让我更加质疑，这张照片真的有必要吗？你打算把那些pinguins或某些图片放在那里有一些信息或有价值的东西吗？ ：d

Answer 2

1. 使用内联样式。 像这样： <img style="width: 100%; height: auto;" ...

2. 确保您的img标记不在容器中，用于设置或限制图像的高度

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

Answer 3

在下图中，您可以看到实际的电子邮件正文在电子邮件的to对象下启动。我无法理解你为什么要做更广泛的事情。

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

在我的图片中那么它只是一个文本，但您可以看到文本在to对象下面开始。

结果：您无法缩放图像或使图像宽于此值。但是，当您将宽度设置为100％时，我相信您明白了。浏览器实际上提供了该宽度的100％宽度。超过这个大小可能会导致UI有点问题，而gmail永远不会允许你。

我希望你明白我的意思。