无法获取缩放的电子邮件标题图像

Question

我正在尝试使用内联样式

该模板很简单，在浏览器中可以响应，但当我将其发送到我的手机时却不响应。图像超出页面，并且不会缩放到视口。

代码如下：

在img标签中，我放置了一个内联样式。

style="display:block; width:auto; height:100%:"

我哪里错了？

我正在用gmail把它发送到android手机上。下面是整个页面：

!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta charset="utf-8" /> <title>Best Holiday Wishes</title> </head> <body> <!-- Begin Content --> <div style="width:100%; height:auto; margin:0 auto;"> <img src="literacy2pointzero.com/images/03.jpg"; style="display:block; width:auto; height:100%:" alt="Holiday Wishes" /> </div> <!-- End Content --> </body> </html>

Answer 1

尝试给出这些属性。

它将使图像缩小并调整到其最大尺寸。

Answer 2

在你的图片上试试这个

<img src="http://www.literacy2pointzero.com/images/03.jpg" style="max-width:100%; height: auto;" width="100%" height="auto" alt="Holiday Wishes" />

但问题可能出在您的viewport标签上。试试这个：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

Answer 3

没有更多的信息，下面是我能做的最好的。它基于Outlook中的类似问题。

首先-使用表格，它在电子邮件客户端中更稳定。其次，通过3列和定义的中间一列，您可以伪造CSS最大宽度样式，允许它缩小到屏幕大小，但永远不会超过TD标记中定义的值。此外，在电子邮件中引用src或href时，请确保添加完整的URL。

如下所示：

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8" />
<title>Best Holiday Wishes</title>
</head>
<body> <!-- Begin Content --> <table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
<td width="600" align="center"><img width="100%" src="http://www.literacy2pointzero.com/images/03.jpg"; style="display:block;" alt="Holiday Wishes" /></td>
<td></td>
</tr>
</table> <!-- End Content --> </body> </html>