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

尝试提供这些属性。

样式=＆＃34;最大宽度：100％;宽度：100％\ 9;高度：自动;＆＃34;

它会使图像缩小并调整为最大尺寸。

Answer 2

尝试使用您的图片

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

但问题可能是您的视口标记。试试这个：

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

Answer 3

如果没有更多信息，以下是我能做的最好的事情。它基于Outlook中的类似问题。它可能不起作用，具体取决于您的发送电子邮件客户端如何呈现图像的宽度属性（例如，Outlook会删除百分比并创建定义的值，无论您在HTML中拥有什么）。

首先 - 使用表格，它在电子邮件客户端中更稳定。其次，通过使用具有已定义的中间列的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>

无法获得电子邮件标题图像来扩展

3 个答案: