Question

我想在td。

内将图像大小设置为100％

String country = f[0];
String date = f[4];
String year = date.split("-")[2];    
if (country.equals("Afghanistan") && year.equals("2010")) {
    a[count] = Integer.parseInt(f[2]);
    sum += a[count];
    count++;
}

所以我有一个带有bg-image的大td，上面有一些带有文字的标识。我正在线上做css以便能够发送html电子邮件。

问题是图像具有自然尺寸，并且不会调整到100％以适合td尺寸。

Answer 1

首先，对于CSS / HTML标准来说，电子邮件是一种痛苦...谷歌将在这里帮助你..一般来说..你最好用outlook / hotmail / gmail测试这个.. Outlook是最糟糕的一个支持HTML电子邮件。

至于代码，请看一下这个示例：http://jsfiddle.net/82bd2fyh/

<table style="width:100%; max-width:960px; margin:auto;">
  <tr style="width:100%;">
    <td style="background-size:100% 100%; background-image:url('http://placehold.it/550x550');">    
        <img src="http://placehold.it/100/09f/fff.png" style="margin-left:35%;" />
      <h1 style="text-align:center;"><a href="#" style="text-decoration:none;color:white;"> Some text on top of bg-image inside a td</a></h1>
    </td>
  </tr>
</table>

请注意，背景大小仅支持CSS3，IE9 + .. 否则，另一种选择是使用普通的图像标记并将其拉伸至100％，然后使用z-index定位您的内容/顶部的div。

电子邮件支持指南专线：https://www.campaignmonitor.com/css/

以上也是假设你在谈论背景图片而不是logo / img标签。

如果你的意思是你的img标签，那么只需对它应用一种风格..但是相信你的意思是你的TD背景图像

Answer 2

基于Mayem的答案，几乎所有电子邮件客户端都是100％正确，我想再添加一些。这在Outlook中根本不起作用，并且可能会导致Gmail应用程序出现问题。

1.。）Outlook几乎总是强制图像的实际大小，无论CSS或HTML大小调整（大小也基于计算机上的PPI设置），因此最好根据您的需要调整图像大小在Outlook中显示，然后控制所有其他客户端的大小。

2.。）Outlook不支持背景图片，所以你需要使用VML模仿这个forook - 最好的地方是http://backgrounds.cm/。它将为您完成大部分工作。

3.。）Gmail不会读取样式表，因此代码可能会导致在gmail应用程序上显示时出现变形版本 - 这是您需要从设计/布局角度进行处理

4.。）保留左边和覆盖内容上的大部分代码都需要适用于电子邮件HTML，因为很多电子邮件客户端都不支持。

请参阅以下代码，该代码是根据Mayhem的回答构建的，其中包含一些调整并添加了Outlook条件VML。

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:960px; margin:0 auto;">
  <tr>
    <td background="http://placehold.it/960x550" width="960" height="550" style="background-size:auto 100%; background-image:url('http://placehold.it/960x550');">    
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:960px;height:550px;">
    <v:fill type="tile" src="http://placehold.it/960x550"  />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div>
        <img src="http://placehold.it/100/09f/fff.png" style="margin-left:35%;" />

      <h1 style="text-align:center;"><a href="#" style="text-decoration:none;color:white;"> Some text on top of bg-image inside a td</a></h1>
  </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>  </tr>
</table>

Answer 3

只需更改

<img src="http://source/logo.png" style="margin-left:35%;" />

到

<img src="http://source/logo.png" style="width:100%;margin-left:35%;" />

Answer 4

更正确的解决方案是更改

<img src="http://placehold.it/100/09f/fff.png" style="margin-left:35%;" />

到

<img src="http://placehold.it/100/09f/fff.png" style="width:65%;margin-left:35%;" />

在td内将img调整为100％

4 个答案: