将img调整为td内的100％

我想将图像大小设置为td内的100％。将img调整为td内的100％

<table style="width:100%; max-width:960px; margin:auto;"> 
 
    <tr style="width:100%;"> 
 
\t <td background="http://source/bg.png"> \t 
 
      <img src="http://source/logo.png" style="margin-left:35%;" /> 
 
\t <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> 
 
\t </td> 
 
    </tr> 
 

 
</table>

所以我有一个很大的TD与BG图像和一些text.I正在做的CSS所有在线的它上面一个标志，可以发送HTML电子邮件。

问题是图像具有自然大小，并且不会调整到100％以适应td大小。

来源

2015-04-25 yerassyl

你“运行的代码片断”没有工作.. – pcs

@saina，当然，我删除了正确的链接 – yerassyl

请检查我的答案@yerassyl – pcs

首先，电子邮件是一个痛苦，当涉及到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/

也是你所谈论的背景图片，而不是标志/ img标签的假设下。

如果你的意思是你的img标签，然后只需一个样式应用到它。但相信你的意思是你TD的背景图片

来源

2015-04-25 09:38:03 Mayhem

不喜欢@Mayhem ....不管怎样，我删除了我的答案，谢谢 – pcs

只需检查CSS指南。如果Position在Outlook中不受支持，那么z-index如何工作？或者我错过了什么？ – lejimmie

他们是不同的，该指南是我可以向你建议的最好的.. – Mayhem

简单地改变

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

到

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

来源

2015-04-25 10:15:57

如下所示更改为100％至65％ –

更正确的解决方案是改变

<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%;" />

来源

2015-04-25 10:32:51

无需加倍发布，只需在同一答案/答案中使用自己的答案和其他两种解决方案。 – Mayhem

大厦Mayem的答案，这是几乎所有的电子邮件客户端100％正确的，我想补充一点，以它。这完全不适用于Outlook，并且可能会出现Gmail应用程序问题。

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

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

3）的Gmail不读的样式表，等等Gmail应用程序时显示的代码可能会导致一个畸形的版本 - 这是你需要从设计/配置立体

4上工作。）剩余边距和覆盖内容上的大部分代码都需要用于电子邮件HTML，因为它在许多电子邮件客户端上都不受支持。

参见下面是从混乱的答案建有一些调整和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>

来源

2015-04-27 14:13:14 Gortonington

将img调整为td内的100％

回答

相关问题