Question

好吧我的问题是我希望在我的HTML电子邮件上有一个图像，它会自动缩放到页面大小，最大宽度为400px。

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

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

但是，只要我将此代码放在表格中（因为我使用大量表格来创建HTML电子邮件），它就无效。

有没有人能解决这个问题？

Answer 1

大多数情况下都很好，只要你的桌子有一个百分比宽度。您希望max-width:400px;用于图像，并且它需要处于流体宽度（基于百分比）表容器中才能工作。请记住，Outlook中不支持max-width，在较小的窗口中查看时可能会破坏您的布局。

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

隐藏东西

我个人不喜欢流畅的电子邮件。我在@media-query标记中使用<style>代替调整大小。

Answer 2

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

将表格宽度设置为所需图像的最大尺寸。（同时将td宽度设置为相同。如果媒体查询启动时没有设置，则会调整一些尺寸。）
将类应用于表格和图像。
还要确保在图像上放置宽度和高度。某些电子邮件客户端（即Outlook旧版本）无法正确调整图像大小。该课程旨在修复图像大小。
我还建议使用HTML 5 Doctype（）。大多数信息都说使用XHTML过渡Doctype。但我发现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>

HTML EMAIL - 在表格中重新调整图片大小

2 个答案: