通过cURL发送HTML邮件时内嵌图片无法按样式设置调整尺寸

核心原因 #

邮件客户端（如Outlook、Gmail、苹果邮件等）对HTML/CSS的支持极其有限，内部<style>块几乎不被识别，行内样式也可能被客户端默认规则覆盖，同时base64格式的小错误也会导致渲染异常。

修复步骤 #

1. 移除base64字符串前的空格
   你的图片src中base64,后多了一个空格，部分客户端会解析失败，导致图片强制按原始尺寸显示：

   <!-- 错误写法 -->
   <img alt="" src="data:image/jpeg;base64, iVBORw0KGgoAAAANSUhE..." style="width:100px;"/>
   <!-- 正确写法 -->
   <img alt="" src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhE..." style="width:100px;"/>
   

2. 同时使用img标签属性和行内样式
   邮件客户端优先识别img标签自带的width/height属性，结合行内样式并加上!important强制覆盖默认规则：

   <!-- 固定宽度，高度自适应 -->
   <img alt="" src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhE..." width="100" style="width:100px !important; height:auto !important;"/>
   <!-- 固定宽高 -->
   <img alt="" src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhE..." width="40" height="40" style="width:40px !important; height:40px !important;"/>
   

3. 确保父容器尺寸匹配
   检查图片所在<td>的尺寸设置，保证其与图片目标尺寸兼容，避免父容器挤压或拉伸图片：

   <td style="border-color:#000000; height:63px; text-align:center; vertical-align:middle; width:100px">
       <img alt="" src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhE..." width="100" style="width:100px !important; height:auto !important;"/>
   </td>
   

4. 彻底放弃内部CSS
   不要使用<head>中的<style>块，所有样式直接写在元素的style属性中，这是HTML邮件的标准兼容写法。

测试建议 #

发送测试邮件到主流邮箱平台，验证不同客户端的渲染效果——不同邮件客户端对HTML的支持差异较大，需针对性调整。

内容的提问来源于stack exchange，提问作者Federico