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

【问题标题】：fit image to cell on resize in html email在 html 电子邮件中调整大小时使图像适合单元格
【发布时间】：2015-01-20 05:12:02
【问题描述】：

我有一个响应式 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 是我的 js 小提琴链接。

【问题讨论】：

标签： html css email responsive-design

【解决方案1】：

假设包含图像的 div 的名称是 pic 你应该这样做

CSS

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

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

【讨论】：

我会推荐 height:auto，以避免任何拉伸或挤压。
我的宽度是那个特定 div 的 100%，你可以检查 js fiddle 中的代码，但当我在 Android 应用程序上的 gmail 应用程序上看到电子邮件时，它仍然显示与上图相同

【解决方案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/（免费）或类似方式运行您的代码，这样您就可以预先检查您的邮件会发生什么

【讨论】：