Html 如何在电子邮件客户端中动态调整图像大小？_Html_Image_Email_Email Client

Html 如何在电子邮件客户端中动态调整图像大小？

html image email

Html 如何在电子邮件客户端中动态调整图像大小？,html,image,email,email-client,Html,Image,Email,Email Client,有没有办法调整图像大小以适应在没有javascript和有限CSS的情况下查看图像的W窗口我之所以这么问，是因为我发了一封电子邮件，上面有一个我想要的尽可能大的主图像，而不需要滚动。我已经阅读了使用javascript和jQuery实现这一点的方法，但我没有看到大多数电子邮件客户端能够正确阅读和响应的方法。这可能吗？如果是的话，怎么做这就是你应该能够做到的或者你可以走简单的路 *更新你可以这样做如果他们有一个选择，把它作为html，这样做，因为它应该正确地呈现像那样如何使一个图像在GM

有没有办法调整图像大小以适应在没有javascript和有限CSS的情况下查看图像的W窗口

我之所以这么问，是因为我发了一封电子邮件，上面有一个我想要的尽可能大的主图像，而不需要滚动。我已经阅读了使用javascript和jQuery实现这一点的方法，但我没有看到大多数电子邮件客户端能够正确阅读和响应的方法。这可能吗？如果是的话，怎么做

这就是你应该能够做到的

或者你可以走简单的路 *更新

你可以这样做如果他们有一个选择，把它作为html，这样做，因为它应该正确地呈现像那样

如何使一个图像在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>

注意：注意下面的部分。这是指向要在GMail中调整大小的图像的路径。把你的图片的URL放在这里。为了运行此代码在浏览器中，您需要将其保存为HTML文档。你可以通过将上面的代码复制并粘贴到代码编辑器或文本中来实现这一点编辑器，如PC上的记事本或MAC上的文本编辑，并使用扩展名“.html”

如果您在MAC上使用TextEdit，则需要切换到纯文本编辑在粘贴代码之前。要执行此操作，请从“格式”中选择“生成纯文本” 菜单

对于本例，我们假设您的文件名为“image_resizer.html”。如果你如果需要更改图像，则需要使用代码编辑HTML文档或文本编辑器。为此，右键单击HTML文档并选择“打开方式” 然后选择代码编辑器或文本编辑器。然后，调出图像源路径在上面的示例中以粗体显示，将其替换为指向更新的图像。然后保存，您的HTML文件就可以运行和更新了指向新图像

如果您在MAC上使用TextEdit，则需要启动一个新文档，切换到纯文本编辑，再次粘贴代码，然后将路径更改为形象

步骤1：在浏览器中打开image_resizer.html。要执行此操作，请双击它或右键单击它并从“打开方式”菜单中选择浏览器

第二步：点击网页上的任意位置。您可以单击图像本身或网页上的空白。这里的想法是确保我们将指针的焦点在窗口上，以验证页面是否已准备好进行选择

第三步：全选。通过在PC上使用“Ctrl+A”或“Command+A”来执行此操作在MAC电脑上。页面内容将突出显示

第四步：复制。通过在PC上使用“Ctrl+C”或在PC上使用“Command+C”来执行此操作苹果电脑。页面内容将被复制到剪贴板。那只是意味着计算机会记住它

步骤5：现在，内容被复制到剪贴板，并由打开你的Gmail，点击“撰写”按钮。把你的咒语放进去内容区域单击您键入消息的区域

第六步：粘贴。通过在PC上使用“Ctrl+V”或在PC上使用“Command+V”来执行此操作苹果电脑

第七步。完成键入电子邮件并发送。

这是html电子邮件的正确方式：

<img alt="" src="" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">

它将自动调整大小以匹配容器元素的宽度，容器元素的宽度应始终为一个值

请注意，特别是在某些Outlook'07'，10和'13客户端上，图像将不会超过其最大尺寸。如果您使用的是最大宽度流体模板，只要您的图像宽度与最大宽度相匹配，这将不会是一个问题。

您需要尽可能老套，以使HTML电子邮件能够在所有客户端上工作

内联样式和HTML4代码应该可以做到这一点。不过请注意，“最大宽度”和“最大高度”适用于大多数客户端，但这不包括Outlook 2007/2010/2013/365，因为它可能超过目标受众的一半。Width适用于所有客户端，但不适用于Outlook 2007/2010/2013/365中的div和p标记！始终使用表而不是div来确保它可以工作

基本上，总是假设某些东西不起作用，并且设计时尽可能地减少错误-并且总是使用内联样式，否则它很可能会被剥离

如果有疑问，请咨询oracle，我始终会：

来源：

我处理的是没有任何容器的大图像。我通过使用“最大宽度”来修复它，以确保图像不会太大

    <img
        src=""
        width="100%"
        style="max-width: 80vw; margin: 0; border: 0; padding: 0; display: block;"
    />

同时使用“宽度”和“最大宽度”可确保图像占用全部可用空间，但不会占用太多空间。我使用80vw而不是100，因为人们很少以全屏模式阅读您的电子邮件，通常更多的是使用查看器Gmail，这通常会占用一些可用空间。

我必须使用电子邮件客户端的内联样式来完成这项工作。但是大多数电子邮件客户都会读到吗？我已经试过了，它似乎有一些小故障

在电子邮件客户端。如果您有任何想法，仍然在使用它。@其他看到此答案的人-此答案在某些电子邮件客户端中有效。使用前进行测试。这在outlook 2016中对我不起作用。里面的图像。父表单元格的宽度不是预期的110px，而是变大了，可能是100%。

<img alt="" src="" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">

    <img
        src=""
        width="100%"
        style="max-width: 80vw; margin: 0; border: 0; padding: 0; display: block;"
    />