Outlook 忽略宽度属性或 css 属性

Question

我已经看到很多问题都涉及到这个问题，但没有一个足够具体来帮助我。因此，如果我简化并再次询问，我希望它不会冒犯任何人。希望永存！

在 Outlook 呈现时控制嵌入在电子邮件中的图像的宽度真的不可能吗？ IE。控制html代码所在图片的宽度

 <img src="cid:seal">

即当 html 代码需要嵌入图像而不是存储在其他地方的图像时。

[注意：“seal”是我在使用嵌入图像创建 MimeBodyPart 时分配的内容 ID]。

详情： 我使用 Javamail 应用程序发送多部分电子邮件。正文部分是一个 html 文档。另一个 MimeBodyPart 带有 html 文档中使用的图像。我已将 html 测试简化为一个两列表格，左列用于图像，右列用于文本。

在 OUTLOOK 中打开时，我尝试过的任何方法都无法控制图像的大小。

图像总是我认为必须是图像的某个原生尺寸......太大......所以它迫使第一个单元格宽度超过 15%。或者，如果我给单元格一个固定宽度，图像会溢出框，即被剪裁。

我把去掉所有字体样式颜色等的基本代码放在下面。

我已经尝试了在 img 标签上使用宽度属性和 css 样式属性的所有组合。我已经将图像包装在另一个表格中......或将其包装在主表格单元格内的 div 块中......甚至将其包装在父表格单元格内的表格单元格内的 div 块中。我已经尝试以固定像素和 % 指定宽度。

如果我们都知道这对于 Outlook 来说是不是完全不可能的话，那就太好了。

或者如果可能的话，发布有效的示例代码。 [让电子邮件立即打开其图像，而不是依赖读者下载它们是非常有吸引力的。]

注意：当我之后从外部来源加载图像时，我似乎能够控制宽度，即 谢谢你的帮助。

<html>
  <head>
    <meta name="viewport" content="width=980, initial-scale=1">
    <title>Test Email</title>
  </head>
  <body style="width:100%; border:0;margin:0;padding:0;">
    <table align="center" 
           style="width:980px; border-collapse:collapse;
                  margin-left:auto; margin-right:auto;">
      <tr  style="border:0; margin:0; padding:0;">
        <td style="width:15%; border:0; margin:0; padding:0;">
          <img src="cid:seal" 
               style="width:6em; height:auto;">
         </td>
         <td    style="width:85%; margin:0; padding:.5em 0em 0em 0em; border:0;">
           Some Titles and stuff
         </td>
       </tr>
  <tr>
    <td colspan="2" style="border:0; margin:0; padding:1em 1em 0em .5em;">
      <p> 1st paragraph
      ....
      <p> last paragraph
    </td>
  </tr>
</table>

Answer 1

在上面 Eugene 的帮助下，我发现了至少一个好的解决方案。

<img src="cid:seal" width="300"  or "300px"  of "15%"> DOES NOT WORK.

但是当我放弃引用时，它起作用了

<img src="cid:seal" width=300 height=300>

这当然意味着以 % 为单位设置宽度仍然是一个问题，因为它需要引号。

但我会尽我所能。电子邮件现在弹出带有徽标，用户无需下载图片。并且...这个 css 主体选择器还可以使用嵌入的图像渲染背景。 [我用“bkg”的Content ID存储了背景图片。]

再次...与使用引号的 img 属性 src="cid:id" 不同，url() 需要不带引号的 id。

<body style="background-image:url(cid:bkg);
             background-repeat:repeat; 
             width:100%;
             generic-family:Sans-serif;
             font-family:Verdana;
             border:0;margin:1em 0 1em 0;padding:0;"> 

Answer 2

Outlook 使用 Word 作为电子邮件编辑器。以下系列文章提供了与支持和不支持的 HTML 元素、属性和级联样式表属性相关的参考文档：

• Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
• Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)

您可以在 Word 中设计页面，然后将生成的文档另存为网页。因此，您将找到需要使用的 HTML 标记。