我正在创建一个电子邮件模板,其中我的容器的最大宽度为600px.我希望能够上传超过800像素宽的图像,并缩小图像以保持其预期的宽高比.因此,即使我上传了800px宽的图像,它也会扩展到600px.
在Outlook中,我不认为它支持图像的最大宽度,因此导致它拉伸.
这有什么解决方案吗？
我已经制作了一个应该响应的html电子邮件模板.它在不同的电子邮件客户端和移动设备上显示完美.但是在Outlook上它已经延伸到100%,这绝对不是很酷,因为标题宽度为600px.
我知道Outlook不支持该max-width属性.但使用只会width导致移动浏览器显示错误.
因此,我的问题是:我应该做什么/更改模板以使其响应并仍然以600px的最大宽度显示？
这是代码.首先使用额外的css(应该更好阅读),第二个使用内联css(应该在发送电子邮件时使用).使用http://beaker.mailchimp.com/inline-css将其呈现为内联.
<!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>
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin:0;
padding:0;
}
* { font-family:Arial, Verdana, "Times New Roman";}
img {
max-width: 100%;
}
.collapse {
margin:0;
padding:0;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%!important;
height: 100%; …我在不支持的环境（kindlegen）中工作max-width。div除非视口缩小，否则我应该具有指定的宽度，在这种情况下，视口应该随之缩小。max-width是我需要的，但不支持。
是否有仅HTML / CSS的解决方法？有什么聪明的主意可以达到同样的效果吗？
（也不支持Javascript。）
.outside {
width: 14em; /* will change with window (100vw) */
background: orange;
}
.inside {
width: 24em; /* max-width will do it */
background: red;
}<div class="outside">
<p>Main container</p>
<div class="inside">Inside text that should never be wider than its parent.</div>
</div>我从未见过令人赞叹的订单确认/发票电子邮件。甚至最好的html5网站也发送糟糕的订单确认电子邮件（有时以纯文本格式）。我认为这是因为发票通常需要使用表格来显示购买的物品，这在移动设备上很难实现。
我发现了一些使表格在手机上更易于管理的技巧：http : //css-tricks.com/examples/ResponsiveTables/sensitive.php，但是对于订单确认电子邮件，这种方法不适用于发票表格。
是否有其他选择可以使订单确认电子邮件在移动设备上看起来不错？发出订单确认电子邮件时，您应该远离桌子吗？