有没有办法在没有javascript 和有限的 CSS 的情况下调整图像大小以适应正在查看图像的窗口？
我问是因为我发送了一个电子邮件活动，其中包含一个我想要尽可能大而不滚动的主要图像。我已经阅读了使用 javascript 和 jQuery 执行此操作的方法，但我没有看到大多数电子邮件客户端会阅读并正确响应的方法。这可能吗？如果是这样 - 如何？
问问题
38059 次
5 回答
10
这是为 html 电子邮件执行此操作的正确方法：
<img alt="" src="" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
它将自动调整大小以匹配容器元素的宽度（应始终为 a <td>）。
请注意，在某些客户端（尤其是 Outlook '07、'10 和 '13）上，图像不会超过其最大尺寸。如果您使用的是最大宽度流体模板，只要您的图像宽度与最大宽度匹配，这将不是问题。
于 2014-03-31T13:18:46.023 回答
6
这就是你应该能够做到的方式
/****this is the Css****/
.full {
width:100%;
height:auto;
}
/***end Css***/
<!--Now the html--!>
<section>
<img src="image/main.png" class="full">
</section>
或者您可以采用简单的方式 *update
你可以这样做
<img src="image/main.png" style="width:100%; height:auto; border:none;" />
并且如果他们可以选择将其作为 html 来执行它，因为它应该像那样正确呈现
于 2012-05-23T01:14:10.557 回答
2
您需要尽可能地过时，以使 HTML 电子邮件适用于所有客户端。
内联样式和 HTML 4 代码应该可以解决问题。但请注意 - 最大宽度和最大高度适用于大多数客户端，但这不包括 Outlook 2007/2010/2013/365，它很可能超过一半的目标受众。宽度适用于所有客户端 - 但不适用于 Outlook 2007/2010/2013/365 中的 div 和 p 标签！始终使用表格而不是 div 来确定它会起作用。
基本上，总是假设某些东西不会起作用并设计尽可能小的错误余量 - 并且总是使用内联样式，否则它很可能会被剥离。
如果有疑问，请咨询神谕，我总是这样做:)
于 2016-02-10T16:07:41.147 回答
0
如何在 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，则需要在粘贴代码之前切换到纯文本编辑。为此，请从“格式”菜单中选择“制作纯文本”。
对于此示例，我们假设您的文件名为“<strong>image_resizer.html”。如果需要更改图像，则需要使用代码或文本编辑器编辑 HTML 文档。为此，请右键单击 HTML 文档并选择“打开方式”并选择代码编辑器或文本编辑器。然后，换出图像源路径（在上面的示例中加粗），将其替换为指向更新图像的路径。然后保存，您的 HTML 文件应该准备就绪并更新以指向新图像。
如果您在 MAC 上使用 TextEdit，则需要启动一个新文档，切换到纯文本编辑，再次粘贴代码，然后更改图像的路径。
第 1 步：在浏览器中打开image_resizer.html 。为此，请双击它或右键单击它并从“打开方式”菜单中选择一个浏览器。
第 2 步：单击网页上的任意位置。您可以单击图像本身或网页上的空白区域。这里的想法是确保我们将指针的焦点放在窗口上，以验证页面是否已准备好被选中。
第 3 步：全选。通过在 PC 上使用“Ctrl + A”……或……在 MAC 上使用“Command + A”来执行此操作。页面内容将突出显示。
第四步：复制。通过在 PC 上使用“Ctrl + C”……或……在 MAC 上使用“Command + C”来执行此操作。页面内容将被复制到剪贴板。（这只是意味着计算机会记住它）。
第 5 步：现在内容已复制到剪贴板（由计算机存储），打开您的 Gmail 并单击撰写按钮。将光标放在内容区域（单击您键入消息的区域）。
第6步：粘贴。通过在 PC 上使用“Ctrl + V”……或……在 MAC 上使用“Command + V”来执行此操作。
步骤 7。 完成键入您的电子邮件并发送。
于 2013-07-25T17:23:33.980 回答
0
我正在处理没有任何容器的非常大的图像。我通过使用来修复它max-width以确保图像不会太大。
<img
src=""
width="100%"
style="max-width: 80vw; margin: 0; border: 0; padding: 0; display: block;"
/>
同时使用 width 和 max-width 确保图像将占用全部可用空间，但不会太多。我使用80vw而不是100因为人们很少以全屏模式阅读您的电子邮件，通常更经常使用查看器（Gmail），这通常会占用一些可用空间。
于 2017-03-21T16:49:35.260 回答