Question

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

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

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

但是，小于320px的图像会缩放到此宽度。我修正了：

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

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

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

Answer 1

电子邮件的HTML编码是PAIN

请参阅此图表：https://www.campaignmonitor.com/css/（您可能需要向下滚动页面，但它已经存在）

电子邮件客户端之间关于他们将识别的内容几乎没有一致性。我建议只编写一个简单的页面来搜索＆＃39; squhes＆＃39;很好。

Answer 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>

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

2 个答案: