Question

我试图开发一个限制流体大小调整功能的电子邮件。众所周知，这是一个废话，但我试试看，因为我已经看到它完成。我被困在一个挂机上 - 我有一个2列的电子邮件，每列都有图像功能和文字。在移动设备上，2列堆叠在彼此之上。我希望能够插入任何图像并使其适应其父级，或者至少在我给它一个将图像设置为定义宽度的类时可以识别。现在，当我在outlook中渲染时，无论我尝试应用什么css技巧，图像都会显示其原始宽度和高度的100％。会喜欢一些见解！

<style>
    body {
    max-width:600px;
    margin:auto;
    font-family: Arial, sans-serif;
    font-size: 12px;
}
img {
    height:auto;
    max-height:auto;
    width:100%;
    display:block
}
table {
    max-width:600px!important;
    border-spacing:0!important;
    border:none;
}
td {
    cellpadding:0px;
    border-spacing:0px;
}
tr {
    cellpadding:0px;
    border-spacing:0px;
}
.headline {
    padding:0px;
    font-size:30px;
}
.paragraph {
    font-size:16px;
    line-height:100%
}
@media only screen and (max-width: 520px) {
    .containerbox {
        width:520px!important;
        max-width:520px!important;
        margin:0 auto!important;
        clear:both!important;
    }
    table {
        width:100%;
        display:block
    }
    .headline {
        font-size:20px;
    }
    .paragraph {
        font-size:14px;
        line-height:100%
    }
}
</style>
<!--[if gte mso 9]>
<style type="text/css">
    .outlook {height:auto; width:290px; max-width:290px; display:block}
</style>
<![endif]-->


<body>
<div style="background-color:#ffffff;">
<center>
<!--[if !mso]><!-->
<table align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" style="     max-width:600px!important; width:100%;"><!--<![endif]-->
<!--[if gte mso 9]><table align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600" ><![endif]-->
   <tr>
        <td>
<!--[if !mso]><!-->
<table align="left" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="48%" ><!--<![endif]-->
<!--[if gte mso 9]><table align="left" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="290" ><![endif]-->
<tr>
<td class="outlook"><img class="outlook" src="shot.jpg" /></td>
</tr>
<tr>
<td class="headline">
Some headline
</td>
</tr>
<tr>
<td class="paragraph">
Some copy is here Some copy is here Some copy is here Some copy is here Some copy is here 
</td>
</tr>
</table>

<!--[if !mso]><!-->
<table align="right" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="48%"><!--<![endif]-->
<!--[if gte mso 9]><table  align="right" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="290" ><![endif]--><tr>
<td class="outlook"><img class="outlook" src="shot.jpg"/></td>
</tr>
<tr>
<td class="headline">
Some headline
</td>
</tr>
<tr>
<td class="paragraph">
Some copy is here Some copy is here Some copy is here Some copy is here Some copy is here 
</td>
</tr>

</table>
        </td> 
    </tr>
</table>
</center></div>
</body>

Answer 1

您可以在MSDN的Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)文章中找到答案。

问题似乎是使用命名样式和CLASS属性。尝试在每个标签上对内嵌样式进行编码，这似乎运作良好。

有什么方法可以使用CSS在Outlook中将图像设置为100％的原始大小？

1 个答案: