VML响应式背景图像

Question

如何使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%“和"auto”。不起作用。

提前谢谢。

Answer 1

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

虽然VML只适用于Outlook，因此您应该使用媒体查询和流体混合来实现所有其他地方的响应式背景图像，Outlook移动仍然是一个问题。

对于上面的代码，我的第一个建议是

<v:fill type="tile" 

您可以将其更改为

<v:fill type="frame" 

这将使其停止重复。这可能是一个真正的问题。如果你想让它重复，那就不要修改代码。但在我看来，你选择的图像并不意味着重复。

我设法使它的高度正确，并切断了右手边，这对我的图像来说实际上工作得很好。但它没有反应。然而，对于你的例子，它会切断V，这可能是可以接受的，或者你可以在左手边重新拍摄V。所以这不是一个理想的解决方案，我会继续寻找一个。

下面是我实现它的方法：

<!-- 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 -->

我想您已经使用过https://blog.edmdesigner.com/background-images-in-modern-html-emails/ solution https://backgrounds.cm/，但我发现上面的代码更易于管理，我在Stigs上找到了它

为了便于以后查找https://gist.github.com/uglyeoin/d8dde956e5a72558de07cf2a240a15c0，我将其保存为一个要点

如果您找到了更好的解决方案，请随时遵循要点。我会写一篇文章，并在某个时候展示我的全部工作。我希望这至少能让你前进一步。