我正在尝试开发具有一些有限的流体调整大小功能的电子邮件。众所周知，这是一个有点糟糕的拍摄，但我还是尝试了一下，因为我已经看到它完成了。我卡在了一个挂断电话上——我有一封 2 栏的电子邮件，每栏都有图像特征和文本。在移动设备上，两列堆叠在一起。我希望能够插入任何图像并让它适应其父级，或者至少在我给它一个将图像设置为定义宽度的类时让 outlook 识别。现在，当我在 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>
最佳答案
您可以在 Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2) 中找到答案MSDN 中的文章。
问题似乎是命名样式和 CLASS 属性的使用。尝试在每个标签处对样式进行内嵌编码，这似乎很有效。
关于html - 有什么方法可以使用 CSS 在 Outlook 中将图像设置为原始大小的 100%？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27241755/