1

好的，所以我的问题是我想在我的 HTML 电子邮件中添加一个图像，该图像会自动缩放到页面大小，最大宽度为 400 像素。

使用以下代码自行创建它没有问题：

<div style="max-width:400px">
<img src="example.jpg" style="max-width:100%">
</div>

但是，一旦我将此代码放入表格中（因为我使用大量表格来创建我的 HTML 电子邮件），它就不起作用了。

有没有人可以解决这个问题？

4

2 回答 2

2

只要您的表格具有百分比宽度，这在大多数情况下都可以。您想要max-width:400px;图像，并且它需要位于流体宽度（基于百分比）的表格容器中才能工作。在 Outlook 中不支持记住max-width，在较小的窗口中查看时可能会破坏您的布局。

此外，div 在电子邮件中的用途很少（可靠）。坚持使用表格，除非您将 div 用于特殊用途，例如用overflow:hidden;

就我个人而言，我不喜欢流畅的电子邮件。@media-query我在标签中使用 a<style>来调整大小。

于 2013-10-02T14:07:17.520 回答
1

最好的方法是将您的图像放在一个表格中并使用@media 来更改发生的情况。（我在下面放了一些代码）

  1. 将表格宽度设置为所需图像的最大尺寸。（还将 td 宽度设置为相同。如果您不这样做，一旦媒体查询开始，它将与您的一些尺寸调整有关。）

  2. 将类应用于表格和图像。

  3. 还要确保在图像上放置宽度和高度。某些电子邮件客户端（即 Outlook 旧版本）无法正确调整图像大小。该类旨在修复图像大小。

  4. 我还建议使用 HTML 5 Doctype ( )。那里的大多数信息都说要使用 XHTML 过渡文档类型。但我发现 HTML5 Doctype 的效果很好，尤其是响应式图像缩放。

CSS

@media only screen and (max-width: 400px){
    *[class=imgResize] {
        width: 100% !important;
        height: auto !important;
    }
}

HTML

<table width="400" border="0" cellspacing="0" cellpadding="0" class="imgResize">
    <tr>
        <td width="400">
            <img src="example.jpg" width="400" height="200" style="display:block;" class="imgResize">
        </td>
    </tr>
</table>
于 2013-10-03T15:05:58.793 回答