html - Mailchimp - 如何在浏览器缩小时调整表格大小并隐藏元素 - html/css

Question

好吧，我已经为 mailchimp 买了一个主题，需要稍微修改一下以供我个人使用。 html 写在表格中。我的目标是页面标题(顶部表格)中的背景图像，以便在浏览器缩小到移动尺寸时调整大小。

到目前为止，我已经能够实现图像的缩小(通过使用将宽度设置为 100% 而不是设置高度)，但是，当浏览器缩小到移动尺寸时，当根本不想看到任何背景时，图像会溢出到图像下方(如 http://i.imgur.com/DfLv29v.png )。与此同时，在缩小时，我试图获取标题、文本和阅读更多按钮以缩小图像，并隐藏 Logo 和所有顶部链接。

我试过使用 max-height 和 max-width，将 overflow 设置为隐藏，并尝试使用 div 容器而不是表格重新做所有事情，但它变得太复杂了。我不了解 javascript 或 jquery，因此首选 html/css 解决方案。

这是我要缩小的主要部分的代码 -

<table border="0" align="center" width="800" cellpadding="0" cellspacing="0" class="container800">
                <tr>
                    <td align="center" style="background-image: url(http://pickedmail.com/mira/img/main-bg.png); background-size: 100%; background-position: top center; background-repeat: repeat;" background="http://pickedmail.com/mira/img/main-bg.png">

                        <table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590 bodybg_color">

                            <tr><td height="30" style="font-size: 30px; line-height: 30px;">&nbsp;</td></tr>

                            <tr>
                                <td>
                                    <table border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590">
                                        <tr>
                                            <td align="center">
                                                <table border="0" cellpadding="0" cellspacing="0" align="center">
                                                    <tr><td height="5" style="font-size: 5px; line-height: 5px;">&nbsp;</td></tr>
                                                    <tr>

这是 jsfiddle 中的全部内容 - https://jsfiddle.net/jackgenesin/2zzkrqzf/

感谢任何帮助，请随时告诉我它的方法太复杂而无法纯粹用 html/css 哈哈，谢谢

Answer 1

紫体与图无关。那来自 bgcolor="8a5a8d"在第一个<table>在你的 fiddle 中标记。你可以消除它，颜色就会消失。

使用您发布的代码，您已经在前两个 <table> 中声明了明确的像素宽度标签。这告诉浏览器不应该调整它们的大小。您需要使用相对维度(例如 100%)来完成这项工作。最好还是添加这个 css:`style="max-width=800px;"所以 table 在台式机上不会太大。

因为你有嵌套的表格来制作这种布局(许多电子邮件客户端仍然需要这样做)，要真正阻止标题图像溢出到邮件正文中，你必须创建两组嵌套的一张一张的 table 。如果工作量太大，请更改 background-size:参数 cover .这将拉伸(stretch)图像以填充背景，并在需要时裁剪边缘以使一切都合适。

最后，要真正实现您想要的一切，自动隐藏 Logo 和缩小菜单，您需要制作模板 responsive .查看免费的 mailchimp 模板，了解您可以为此重复使用的代码。

而且您将必须在 HTML/CSS 中完成所有这些，因为您不能依赖允许 javascript 的电子邮件客户端。