如何在电子邮件正文中缩放图像?
我在电子邮件中添加 html 模板。该模板中有一张图片。
我想要,图像应该根据电子邮件客户端宽度调整。高度应该根据图像宽度调整。像这样:-
它应该适用于所有电子邮件提供商。
仅供参考,我正在开发 ASP.NET 应用程序。
编辑:
我将图像宽度设置为 100%,但我没有在那里设置图像高度。
这是最好的还是正确的方法?
如何在电子邮件正文中缩放图像?
我在电子邮件中添加 html 模板。该模板中有一张图片。
我想要,图像应该根据电子邮件客户端宽度调整。高度应该根据图像宽度调整。像这样:-
它应该适用于所有电子邮件提供商。
仅供参考,我正在开发 ASP.NET 应用程序。
编辑:
我将图像宽度设置为 100%,但我没有在那里设置图像高度。
这是最好的还是正确的方法?
我会去设置:
width: 100%;
height: auto;
演示: http: //jsfiddle.net/gjtC9/ 没有 CSS:http: //jsfiddle.net/gjtC9/2/
问题是否是最好和正确的方法..如果有人在手机上打开电子邮件,分辨率会很小 - 所以巨大的图像被缩放到更小的一个。
-> 手机将加载巨大的图像,然后将其缩小 - 这让我更加怀疑,那张照片真的有必要吗?你打算把那些企鹅或一些包含一些信息或有价值的东西的图像放在那里吗?:D
在下图中,您可以看到实际的电子邮件正文从电子邮件的 to 对象开始。我不明白你为什么想做更广泛的事情。
从您的图像:您提供的图像图像,照片已正确缩放。它适合从左到右包裹它的 div。
在我的图像中:它只是一个文本,但你可以看到文本就在to
对象下方开始。
结果:您不能缩放或使图像比这更宽。但是,我相信您在将宽度设置为 100% 时会理解。浏览器实际上确实提供了该宽度的 100% 宽度。超过这个大小可能会在 UI 中引起一些问题,而 gmail 永远不会允许你这样做。
我希望你明白我的意思。
使用内联样式。像这样:
<img style="width: 100%; height: auto;" ...
确保您的img
标签不在设置或限制图像高度的容器中
max-width
,而不是width
.
<img style="max-width: 100%" >