内联 CSS 以调整电子邮件中移动图像的大小

Question

尝试在 Pardot 中仅针对移动设备使用内联 CSS。

我正在使用：

    @media screen and (max-width: 768px) {
        .secondimage {width: 50vw !important;}

这似乎适用于移动设备。但是 Pardot 想要图像高度和宽度：

<img align="left" alt="alt" border="0" class="secondimage" src="image.jpg" style="float: left; width: 259px; height: 288px; border-width: 0px; border-style: solid;" width="259">

在移动版 Outlook 中，图像的比例正确，但在 Gmail 中，图像遵循以像素为单位的高度并将其压缩到视口宽度的 50%。我怎样才能让它在任何地方都以正确的比例呈现？

Answer 1

在您的媒体查询样式中添加 height:auto。

@media screen and (max-width: 768px) {
  .secondimage {width: 50vw !important; height:auto !important; }
}

内联 CSS 以调整电子邮件中移动图像的大小

Inline CCS to resize image for mobile in Emails

html

css

email

pardot