Html 如何在电子邮件客户端中动态调整图像大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10711638/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dynamically resize an image inside an email client?
提问by L84
Are there ways to resize an image to fit thew window the image is being viewed in WITHOUTjavascript and limited CSS?
有没有办法调整图像的大小以适应在没有javascript 和有限 CSS 的情况下查看图像的窗口？
I ask because I have an email campaign that I send out that features a main image that I want as large as possible withoutscrolling. I have read ways to do this with javascript and jQuery but I do not see a way to do this that the majority of email clients will read and react to properly. Is this possible? And if so - How?
我问是因为我发送了一个电子邮件活动，其中包含一个我想要尽可能大的主图像而无需滚动。我已经阅读了使用 javascript 和 jQuery 执行此操作的方法，但我没有看到大多数电子邮件客户端可以正确读取和响应的方法。这可能吗？如果是这样 - 如何？
回答by John
This is the correct way to do it for a html email:
这是对 html 电子邮件执行此操作的正确方法：
<img alt="" src="" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
It will auto resize to match the width of the container element (which should always be a <td>).
它将自动调整大小以匹配容器元素的宽度（应始终为 a <td>）。
Note that on some clients (Outlook '07, '10 & '13 in particular), the image will not exceed it's maximum dimensions. If you are working with a max-width fluid template this will not be an issue providing your image width matches the max width.
请注意，在某些客户端（尤其是 Outlook '07、'10 和 '13）上，图像不会超过其最大尺寸。如果您使用的是最大宽度流体模板，只要您的图像宽度与最大宽度匹配，这将不是问题。
回答by nick perez
This is how you should be able to do it
这就是你应该能够做到的
/****this is the Css****/
.full {
width:100%;
height:auto;
}
/***end Css***/
<!--Now the html--!>
<section>
<img src="image/main.png" class="full">
</section>
Or you can go the simple way *update
或者你可以走简单的方式 *update
you can do it like this
你可以这样做
<img src="image/main.png" style="width:100%; height:auto; border:none;" />
and if they have an option to put it as html to do it like that as it should render correctly like that
并且如果他们可以选择将它作为 html 来做，因为它应该像那样正确呈现
回答by John Lewis
You need to be as archaic as possible to make HTML emails work across all clients.
您需要尽可能过时才能使 HTML 电子邮件适用于所有客户端。
Inline styles and HTML 4 code should do the trick. Be warned though - max-width and max-height works in most clients, but this does NOT include Outlook 2007/2010/2013/365 which could well be over half of your target audience. Width works in all clients - but NOT on div and p tags in Outlook 2007/2010/2013/365! Always use tables not divs to be certain it will work.
内联样式和 HTML 4 代码应该可以解决问题。但请注意 - max-width 和 max-height 适用于大多数客户端，但这不包括 Outlook 2007/2010/2013/365，它可能超过一半的目标受众。宽度适用于所有客户端 - 但不适用于 Outlook 2007/2010/2013/365 中的 div 和 p 标签！始终使用表格而不是 div 以确保它可以工作。
Basically, always assume something isn't going to work and design for the smallest possible margin for error - and ALWAYS use inline styling or it might well get stripped.
基本上，总是假设某些东西不会起作用，并设计出尽可能小的错误余量 - 并且总是使用内联样式，否则它很可能会被剥离。
If in doubt consult the oracle, I always do :)
如果有疑问请咨询oracle，我总是这样做:)
回答by Vadorequest
I was dealing with really big images without any kind of a container. I fixed it by using max-widthto ensure the image wouldn't be too big.
我正在处理没有任何容器的非常大的图像。我通过使用max-width来修复它以确保图像不会太大。
<img
src=""
width="100%"
style="max-width: 80vw; margin: 0; border: 0; padding: 0; display: block;"
/>
Using both width and max-width ensures the image will take the full available space, but not too much. I used 80vwand not 100because people rarely read your emails in a fullscreen mode, usually more often using a viewer (Gmail), which usually uses a bit of the available space.
同时使用 width 和 max-width 可确保图像占用全部可用空间，但不会占用太多空间。我使用80vw而不是100因为人们很少以全屏模式阅读您的电子邮件，通常更经常使用查看器（Gmail），它通常会占用一些可用空间。
回答by user2494494
HOW TO MAKE AN IMAGE RESIZE ITSELF IN A GMAIL
如何在 GMAIL 中调整图像大小
First, here is the HTML code we will be working with:
首先，这是我们将使用的 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>
NOTE: Notice the part that reads "http://yourImagePathHere.jpg". This is the path that points to the image you want resized in the GMail. Put the URL for your image here. In order to run this code in a browser, you'll need to have it saved as an HTML document. You can accomplish this by copying and pasting the code above into a code editor or text editor (such as Notepad on a PC or TextEdit on a MAC) and save it with the extension “.html”.
注意：注意读取“ http://yourImagePathHere.jpg”的部分。这是指向您要在 GMail 中调整大小的图像的路径。将图片的 URL 放在这里。为了在浏览器中运行此代码，您需要将其保存为 HTML 文档。您可以通过将上面的代码复制并粘贴到代码编辑器或文本编辑器（例如 PC 上的记事本或 MAC 上的 TextEdit）并使用扩展名“.html”保存来完成此操作。
If you are using TextEdit on a MAC, you will need to switch to plain text editing before pasting the code. To do this, choose “Make Plain Text” from the “Format” menu.
如果您在 MAC 上使用 TextEdit，则需要在粘贴代码之前切换到纯文本编辑。为此，请从“格式”菜单中选择“制作纯文本”。
For this example, we will assume your file name is “image_resizer.html”. If you need to change the image, you will need to edit the HTML document with a code or text editor. To do this, right click the HTML document and choose “Open With” and select a code editor or text editor. Then, swap out the image source path (bolded in the example above), replacing it with the path that points to the updated image. Then save, and your HTML file should ready to go and updated to point to the new image.
在本例中，我们假设您的文件名为“ image_resizer.html”。如果需要更改图像，则需要使用代码或文本编辑器编辑 HTML 文档。为此，请右键单击 HTML 文档并选择“打开方式”并选择代码编辑器或文本编辑器。然后，换出图像源路径（在上面的示例中加粗），将其替换为指向更新图像的路径。然后保存，您的 HTML 文件应该准备就绪并更新为指向新图像。
If you are using TextEdit on a MAC, you will need to start a new document, switch to plain text editing, paste the code again, and then change the path to the image.
如果您在 MAC 上使用 TextEdit，您将需要开始一个新文档，切换到纯文本编辑，再次粘贴代码，然后更改图像的路径。
Step 1: Open image_resizer.htmlin a browser. To do this, double click it OR right click it and select a browser from the “Open With” menu.
第 1 步：在浏览器中打开image_resizer.html。为此，请双击它或右键单击它并从“打开方式”菜单中选择一个浏览器。
Step 2: Click anywhere on the webpage. You can click on the image itself or the white space on the webpage. The idea here is to make sure that we will have the pointer's focus on the window to verify that the page is ready to be selected.
第 2 步：单击网页上的任意位置。您可以单击图像本身或网页上的空白区域。这里的想法是确保我们将指针的焦点放在窗口上以验证页面是否已准备好被选择。
Step 3: Select All. Do this by using “Ctrl + A” on a PC … OR … “Command + A” on a MAC. The page contents will be highlighted.
第三步：全选。通过在 PC 上使用“Ctrl + A”来执行此操作……或者……在 MAC 上使用“Command + A”。页面内容将突出显示。
Step 4: Copy. Do this by using “Ctrl + C” on a PC … OR … “Command + C” on a MAC. The page contents will be copied to the clipboard. (That just means that the computer memorizes it).
第四步：复制。通过在 PC 上使用“Ctrl + C”来执行此操作……或者……在 MAC 上使用“Command + C”。页面内容将被复制到剪贴板。（那只是意味着计算机会记住它）。
Step 5: Now that the contents are copied to the clipboard (memorized by the computer), open your Gmail and click the compose button. Place your curser in the content area (click in the area where you type a message).
第 5 步：现在内容已复制到剪贴板（由计算机记忆），打开您的 Gmail 并单击撰写按钮。将光标置于内容区域（单击您键入消息的区域）。
Step 6: Paste. Do this by using “Ctrl + V” on a PC … OR … “Command + V” on a MAC.
第六步：粘贴。通过在 PC 上使用“Ctrl + V”来执行此操作……或者……在 MAC 上使用“Command + V”。
Step 7. Finish typing your email message and send it.
步骤 7. 完成电子邮件信息的输入并发送。
