Html email VML响应背景图像

如何在VML中生成背景图像

为了实现outlook兼容性，我在电子邮件中添加了VML背景。这就是它的样子

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:900px;height:600px">
          <v:fill type="tile" size="100%,100%" src="https://s3-ap-southeast-1.amazonaws.com/valiram.vmailbuilder.images/44/background.jpg" color="#333333" ></v:fill>
            <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
     <![endif]-->
[table content here]
    <!--[if gte mso 9]>
                </v:textbox>
               </v:rect>
      <![endif]-->

[此处为表格内容]

v:rect设置为固定宽度。如何使其响应屏幕的大小。我试过“100%”和“自动”。不管用

---

提前感谢。

这是一个改进，但仍然不是一个完整的解决方案。我提供它是为了帮助其他人找到完整的解决方案（如果可能的话）

虽然VML只在Outlook中工作，因此您应该使用媒体查询和fluid hybrid在所有其他地方获得响应的背景图像，但Outlook mobile仍然是一个问题

我对上述代码的第一个建议是

<v:fill type="tile" 

---

我一直在试图解决这个问题，但还没有解决方案。尝试过媒体查询，没有运气。仅当我将“样式”属性设置为某个宽度时，它才起作用。这是针对旧版本outlook（2011）的，这里是VML信息，但我不认为它是关于手机的。这里还有：这表明我们可以使用百分比，虽然它必须是1000而不是100，并且是自动的，但是最近更新了，尽管在2011年不推荐使用
<v:fill type="frame" 

<!-- Full width background image with content.  Image is full width but 200px high -->
<div mc:repeatable="options" mc:variant="Main Background Image with Text overlay">
    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%;min-height:328px;height:328px;" background="https://gallery.mailchimp.com/fa85a578f928f05fa5750d667/images/cc24d737-fea1-4a47-87fb-517f5fecb2f4.jpg">
        <tr>
            <td style="font-size: 16px;line-height: 20px; font-family: Georgia, Arial, sans-serif;">
                <!--[if gte mso 9]>
                <v:rect style="width:600px;height:328px;" strokecolor="none" stroke="false">
                    <v:fill type="frame" color="#303131" src="https://gallery.mailchimp.com/fa85a578f928f05fa5750d667/images/cc24d737-fea1-4a47-87fb-517f5fecb2f4.jpg" /></v:fill>
                </v:rect>
                <v:shape id="bgImage" style="position:absolute;width:600px;height:328px;">
                <![endif]-->
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td style="height: 238px;">&nbsp;</td>
<!-- this is just a spacer to force the heading down -->
                    </tr>
                    <tr>
                        <td class="h1 bold white" mc:edit="background-image-h1">
                            My Heading Text
                        </td>
                    </tr>
                </table>
                <!--[if gte mso 9]>
                </v:shape>
                <![endif]-->
            </td>
        </tr>
    </table>
</div>
<!-- END Full width background image with content.  Image is full width but 200px high -->