如何动态调整电子邮件客户端中的图像大小？
Posted
技术标签:
【中文标题】如何动态调整电子邮件客户端中的图像大小？【英文标题】：How to dynamically resize an image inside an email client? 【发布时间】：2012-05-29 12:16:02 【问题描述】：有没有办法调整图像的大小以适应在 没有 javascript 和有限的 CSS 中查看图像的窗口？
我问是因为我发送了一个电子邮件活动，其中包含我想要尽可能大的主图像滚动。我已经阅读了使用 javascript 和 jQuery 执行此操作的方法，但我没有看到大多数电子邮件客户端会阅读并正确响应的方法。这可能吗？如果是这样 - 如何？
【问题讨论】：
【参考方案1】：这是处理 html 电子邮件的正确方法：
<img src="" style="margin: 0; border: 0; padding: 0; display: block;">
它将自动调整大小以匹配容器元素的宽度（应始终为<td>）。
请注意，在某些客户端（尤其是 Outlook '07、'10 和 '13）上，图像不会超过其最大尺寸。如果您使用的是最大宽度流体模板，只要您的图像宽度与最大宽度匹配，这将不是问题。
【讨论】：
这在 Outlook 2016 中对我不起作用。图片在<td> 中。而不是预期的 110px 宽度（父表格单元格的宽度）它变得很大，可能是 100%。【参考方案2】：
这就是你应该能够做到的方式
/****this is the Css****/
.full
width:100%;
height:auto;
/***end Css***/
<!--Now the html--!>
<section>
<img src="image/main.png" class="full">
</section>
或者你可以走简单的路 *更新
你可以这样做
<img src="image/main.png" style="width:100%; height:auto; border:none;" />
如果他们可以选择将它作为 html 来执行它，因为它应该像那样正确呈现
【讨论】：
我必须使用电子邮件客户端的内联样式来执行此操作。但大多数电子邮件客户会阅读吗？ 我已经尝试过了，它似乎在电子邮件客户端中出现了一些故障。如果您有任何想法，请继续使用它。 @ 看到此答案的其他人 - 此答案适用于 一些 电子邮件客户端。使用前测试。【参考方案3】：您需要尽可能地过时，以使 HTML 电子邮件适用于所有客户端。
内联样式和 HTML 4 代码应该可以解决问题。但请注意 - max-width 和 max-height 适用于大多数客户端，但这不包括 Outlook 2007/2010/2013/365，它可能超过一半的目标受众。宽度适用于所有客户端 - 但不适用于 Outlook 2007/2010/2013/365 中的 div 和 p 标签！始终使用表格而不是 div 来确保它会起作用。
基本上，总是假设某些东西行不通，并为尽可能小的错误余量进行设计 - 并且始终使用内联样式，否则它很可能会被剥离。
如果有疑问，请咨询神谕，我总是这样做:)
来源：https://www.campaignmonitor.com/css/b/
【讨论】：
【参考方案4】：如何在 GMAIL 中调整图片大小
首先，这是我们将使用的 HTML 代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Image Resizer</title>
</head>
<body>
<!-- Point to your image by placing the path in the source (src) attribute. -->
<img src="http://yourImagePathHere.jpg" style="width:100%; background-repeat:no-repeat; background-size:100%;" />
</body>
</html>
注意：注意读取“http://yourImagePathHere.jpg”的部分。这是指向您要在 GMail 中调整大小的图像的路径。将您的图片的 URL 放在这里。为了运行此代码 在浏览器中，您需要将其保存为 HTML 文档。你可以 通过将上面的代码复制并粘贴到代码编辑器或文本中来完成此操作 编辑器（例如 PC 上的记事本或 MAC 上的 TextEdit）并使用 扩展名“.html”。
如果您在 MAC 上使用 TextEdit，则需要切换到纯文本编辑 在粘贴代码之前。为此，请从“格式”中选择“制作纯文本” 菜单。
对于本示例，我们假设您的文件名为“image_resizer.html”。如果你 需要更改图像，您需要使用代码编辑 HTML 文档 或文本编辑器。为此，请右键单击 HTML 文档并选择“打开方式” 并选择代码编辑器或文本编辑器。然后，换出图片源路径 （在上面的示例中加粗），将其替换为指向 更新的图像。然后保存，您的 HTML 文件应该可以使用并更新了 指向新图像。
如果您在 MAC 上使用 TextEdit，则需要创建一个新文档， 切换到纯文本编辑，再次粘贴代码，然后将路径更改为 图片。
第 1 步：在浏览器中打开 image_resizer.html。为此，请双击它或 右键单击它并从“打开方式”菜单中选择一个浏览器。
第 2 步：点击网页上的任意位置。您可以单击图像本身或 网页上的空白区域。这里的想法是确保我们将拥有 将指针的焦点放在窗口上，以验证页面是否已准备好被选中。
第 3 步：全选。通过在 PC 上使用“Ctrl + A”来执行此操作……或……“Command + A” 在 MAC 上。页面内容将突出显示。
第 4 步：复制。通过在 PC 上使用“Ctrl + C”来执行此操作……或者……在“Command + C”上 一个 MAC。页面内容将被复制到剪贴板。 （这只是意味着 计算机会记住它）。
第 5 步：现在内容已复制到剪贴板（由 计算机），打开您的 Gmail 并单击撰写按钮。把你的光标放在 内容区域（单击您键入消息的区域）。
第 6 步：粘贴。通过在 PC 上使用“Ctrl + V”来执行此操作……或者……在“Command + V”上 MAC。
第 7 步。完成输入电子邮件并发送。
【讨论】：
【参考方案5】：我正在处理没有任何容器的非常大的图像。我使用max-width 修复它以确保图像不会太大。
<img
src=""
style="max-width: 80vw; margin: 0; border: 0; padding: 0; display: block;"
/>
同时使用 width 和 max-width 可确保图像占用全部可用空间，但不会太多。我使用了80vw 而不是100，因为人们很少在全屏模式下阅读您的电子邮件，通常更经常使用查看器（Gmail），这通常会占用一些可用空间。
【讨论】：
以上是关于如何动态调整电子邮件客户端中的图像大小？的主要内容，如果未能解决你的问题，请参考以下文章