Question

有没有办法调整图像大小以适应窗口，在没有 javascript和有限的CSS中查看图像？

我问，因为我发送了一个电子邮件广告系列，其中包含一个我希望尽可能大的主图像，而不用滚动。我已经阅读了使用javascript和jQuery执行此操作的方法，但我没有看到这样做的方法，大多数电子邮件客户端将正确阅读和做出反应。这可能吗？如果是这样 - 怎么样？

Answer 1

这是为html电子邮件执行此操作的正确方法：

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

它会自动调整大小以匹配容器元素的宽度（应始终为<td>）。

请注意，在某些客户端（特别是Outlook＆＃39; 07，＆＃39; 10＆amp;＆＃39; 13）上，图片的最大尺寸不会超过它。如果您正在使用最大宽度的流体模板，那么如果图像宽度与最大宽度相匹配，则不会出现问题。

Answer 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来执行它，因为它应该像那样正确地呈现

Answer 3

您需要尽可能地过时，以使HTML电子邮件能够在所有客户端上运行。

内联样式和HTML 4代码应该可以解决问题。但请注意 - max-width和max-height适用于大多数客户端，但这不包括Outlook 2007/2010/2013/365，这可能超过目标受众的一半。宽度适用于所有客户端 - 但不适用于Outlook 2007/2010/2013/365中的div和p标签！始终使用表而不是div来确定它是否有效。

基本上，总是假设某些东西不起作用并设计出最小的错误余量 - 并且总是使用内联样式或者它可能会被剥离。

如果有疑问请咨询oracle，我总是这样做：）

来源：https://www.campaignmonitor.com/css/b/

Answer 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>

注意：请注意阅读＆＃34; http://yourImagePathHere.jpg＆＃34;的部分。这是指向要在GMail中调整大小的图像的路径。在此处输入图片的网址。为了运行此代码在浏览器中，您需要将其保存为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”on 一个MAC。页面内容将被复制到剪贴板。（这只是意味着电脑记忆它。）

步骤5：现在将内容复制到剪贴板（由...记忆）计算机），打开Gmail并单击撰写按钮。放置你的光标内容区域（单击您键入消息的区域）。

第6步：粘贴。通过在PC上使用“Ctrl + V”来执行此操作...或者...“Command + V”on 一个MAC。

步骤7.完成输入您的电子邮件并发送。

Answer 5

我正在处理没有任何容器的真正大图像。我使用max-width修复了它，以确保图像不会太大。

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

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

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

5 个答案:

你可以这样做