无论图像大小如何，如何使 HTML 电子邮件中的图像响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29391855/
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 make an image responsive in HTML email regardless of image size
提问by Raj Chudasama
I am creating an email template where my container has a max-width: 600px. I want to be able to upload images that are in excess of 800px wide, and the images to scale down to maintain their intended aspect ratio. So even if I uploaded an 800px wide image, it would scale to 600px.
我正在创建一个电子邮件模板，其中我的容器具有最大宽度：600 像素。我希望能够上传超过 800 像素宽的图像，并缩小图像以保持其预期的纵横比。因此，即使我上传了 800 像素宽的图像，它也会缩放到 600 像素。
In Outlook, I don't think it supports max-width for images which therefore caused it to stretch.
在 Outlook 中，我认为它不支持图像的最大宽度，因此导致它拉伸。
Are there any solutions for this?
有什么解决方案吗？
回答by Gortonington
Yes and no. Outlook tends to force the image to its actual size, regardless of your CSS and HTML sizings. So using images that are bigger than what you want to be displayed on your desktop version is likely to break on Outlook.
是和否。无论您的 CSS 和 HTML 大小如何，Outlook 都倾向于将图像强制为其实际大小。因此，使用大于您希望在桌面版本上显示的图像可能会在 Outlook 上中断。
Your best bet for responsive images would be to have the images as 100% width inside a table that has max-width set. Then around this table, make conditional code for MSO that contains a set width table at the max-width size.
响应式图像的最佳选择是将图像设置为 100% 宽度的表格，其中设置了最大宽度。然后围绕这个表，为 MSO 制作条件代码，其中包含一个最大宽度大小的设置宽度表。
Example below:
下面的例子：
<!--[if gte MSO 9]>
<table width="640">
<tr>
<td>
<![endif]-->
<table width="100%" style="max-width:640px;">
<tr>
<td>
<img src="image.jpg" width="100%" />
</td>
</tr>
</table>
<!--[if gte MSO 9]>
</td>
</tr>
</table>
<![endif]-->
There will still be some quirks with using max-width as not all clients support it. I would view CSS compatabilityand make little tweaks as needed on top of the above to ensure it fits. Then test and test some more.
使用 max-width 仍然会有一些怪癖，因为并非所有客户端都支持它。我会查看CSS 兼容性并根据需要在上述基础上进行一些小调整以确保它适合。然后测试和测试更多。
回答by GTCrais
Been breaking my head over image width in emails for a day now. Finally got it to work in a "responsive" manner...somewhat. What I found is that, while some email clients will ignore CSS for <img>tags (at least CSS for widthand max-width) and set the image to its full width, most of them will actually respect the widthattribute set directly on the <img>. So this is what I did:
一天以来，我一直在为电子邮件中的图像宽度而烦恼。终于让它以“响应”的方式工作......有点。我发现，虽然一些电子邮件客户端会忽略<img>标签的CSS （至少是width和 的CSS max-width）并将图像设置为其全宽，但它们中的大多数实际上会尊重width直接在<img>. 所以这就是我所做的：
<img class="logo" width="250" src="http://myweb.com/img/myimg.png" />
And then:
进而：
.logo {
display: block;
width: 310px !important;
max-width: 100% !important;
}
Clients that respect the CSS, will use CSS for the image, while clients that ignore it will just have width set to 250px, so that image doesn't break the layout for different screensizes.
尊重 CSS 的客户端将对图像使用 CSS，而忽略它的客户端只会将宽度设置为 250px，这样图像就不会破坏不同屏幕尺寸的布局。
回答by Demetre Phipps
I used a conditional for mobile, included a div tag and had set the background image url, with defined height and width percentages and the div tag has defined boundaries. Works so much better than img tag. The condition below handles displaying images in email client other than Outlook such as Mobile Browsers, WebMail, etc. Works for image data too.
我使用了移动设备的条件，包括一个 div 标签并设置了背景图像 url，具有定义的高度和宽度百分比，并且 div 标签具有定义的边界。效果比 img 标签好得多。以下条件处理在 Outlook 以外的电子邮件客户端（如移动浏览器、WebMail 等）中显示图像。也适用于图像数据。
Example:
<!--[if !mso]> <!-->
<div
style="
background-image:url(http://www.example.org/image.png);
background-repeat:no-repeat;
background-size:100% 100%;
width:auto; height: 300px;
">
</div>
<!-<![endif]->
