时事通讯电子邮件中的响应式图像最大宽度属性答案

【问题标题】：responsive images max-width property in newsletter email时事通讯电子邮件中的响应式图像最大宽度属性
【发布时间】：2015-06-19 16:48:05
【问题描述】：

我设计了一个包含多个元素的响应式电子邮件，每个元素都有一个主图像。

为了防止图像在 iphone 和更高的分辨率下中断，我有：

img { max-width: 320px !important; height: auto !important; }

但是，小于 320 像素的图像会缩放到这个宽度。我用以下方法解决了这个问题：

img { max-width: 100% !important; width: auto !important; height: auto !important; }

这适用于主图像，但随后业务徽标会调整为其父容器的 100%。

如何充分利用每种解决方案？

【问题讨论】：

标签： html css responsive-design html-email

【解决方案1】：

电子邮件的 HTML 编码是一种痛苦

查看此图表：https://www.campaignmonitor.com/css/（您可能需要向下滚动页面，但它就在那里）

电子邮件客户端之间对于他们将识别的内容几乎没有一致性。我建议只编写一个可以很好地“挤压”的简单页面。

【讨论】：

【解决方案2】：

首先，您的样式将应用于所有图片，包括您的徽标。由于您没有特定的图像类。其次，对于电子邮件模板，您应该使用inline styles 并使用table 进行布局。示例：

<table style="width: 100%; max-width: 600px; margin: 0 auto;">
  <tr>
    <td>
      <img src="main.jpg" style="width: auto; max-width: 100%">
    </td>
  </tr>
  <tr>
    <td align="center">
      <img src="logo.png">
    </td>
  </tr>
</table>

【讨论】：