Question

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

到目前为止，我已经能够实现图像的缩小（通过使用设置宽度达到100％并且不设置高度），但是，当浏览器缩小到移动尺寸时，背后的紫色身体图像下方的图像溢出（如此http://i.imgur.com/DfLv29v.png），何时根本不想看到任何背景。随着这一点，在缩小时，我正在尝试获取标题，文本和阅读更多按钮以缩小图像，并隐藏徽标和所有顶部链接。

我尝试过使用max-height和max-width，将overflow设置为hidden，并尝试使用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>。你可以消除它，颜色会消失。

使用您发布的代码，您在前两个<table>标记中声明了明确的像素宽度。这告诉浏览器这些不应该调整大小。您需要使用相对维度（例如100％）来完成此工作。最好还是添加这个css：`style =“max-width = 800px;”因此桌面在台式机上不会太大。

由于您已经有嵌套表来进行此布局（许多电子邮件客户端仍然需要这样），要真正阻止标题图像溢出到邮件正文中，您必须创建两组嵌套表一个接一个。如果这工作太多，请将background-size:参数更改为cover。这将拉伸图像以填充背景，如果需要裁剪边缘以使一切都适合。

最后，要真正实现您想要的一切，使用自动隐藏徽标和缩小菜单，您需要制作模板responsive。看一下免费的mailchimp模板，找出你可以重用的代码。

你必须在HTML / CSS中完成所有这些操作，因为你不能依赖允许使用javascript的电子邮件客户端。

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

1 个答案: