在html电子邮件中调整大小时适合图像到单元格

Question

我有一个响应式html电子邮件设计，我使用广告系列监视器中的this教程，但我遇到一个问题，在设计了很多模板和阅读后，我的图像在移动设备上观看时不适合设备很多电子邮件设计博客我了解到gmail默认删除头部的css或样式并且只允许内联html。所以现在在我的情况下我希望我的图像适合设备宽度但是当我发送邮件时它不合适但是我可以在浏览器上看到，因为下面编码的媒体查询。

 @media screen and (max-width: 480px) and (min-width:300px) {
.col185{max-width:100% !important;}
.col180{max-width: 100% !important;}
.col180 img{
  height: 155px;
 }
}

。那么有什么方法可以让我在移动设备上看到图像。 This是我的小提琴链接。

Answer 1

让我们说包含图片的div的名称是pic你应该这样做

CSS

.pic img{
width:100%;
height:100%;
}

这将允许图像根据父div重新调整大小。如果您仍然不了解这种方法，请告诉我，我会对其进行扩展

Answer 2

您需要更改为width或min-width，现在您需要max-width。见下文：

@media screen and (max-width: 480px) and (min-width:300px) {
.col185{min-width:100% !important;}
.col180{min-width: 100% !important;}
.col180 img{
  height: auto;
 }
}

否则，您只是说使用height: 155px，宽度将调整到该高度。

另外，请记住，并非所有邮件客户端都会使您的CSS相同。其中许多，特别是Outlook，不会接受许多CSS规则。可以肯定的是，您可以通过http://premailer.dialect.ca/（免费）或类似代码运行代码，以便预先检查邮件会发生什么情况