Question

我正在尝试扩展一个包含我正在开发的电子邮件背景图像的表格单元格。但是，我在移动版本上制作高度动态时遇到了麻烦。

表格单元格：

在背景图片上没有内容
手机上的叠加
需要以1：1的比例显示图像，顶部或侧面没有图像被切断
手机上的全宽

Fiddle

当您调整浏览器窗口大小时，小提示将使问题清晰 - 单元格堆栈很好，宽度很好，这就是问题的高度。单元格的高度太低，切断了部分图像。

我需要高度首先在桌面上精确地为385px x 256px（图像的确切大小），然后在移动设备上为100％宽度，同时在移动设备上也具有完整的图像高度。

这种方法背后有理由在这里不值得为你烦恼。

代码：

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
     <tr>
        <td align="center">
            <table width="215" height="256" border="0" cellspacing="0" cellpadding="0" style="float:left;" align="left" class="100p" bgcolor="#eeeeee">
                <tr>
                    <td width="215" style="float:left;" align="left" class="displayproperlyplease 100nopad">

                        <table width="100%" border="0" cellspacing="0" cellpadding="0" height="256">
                            <tr>
                                <td align="center">
                                    TEXT
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td width="20"></td>
                </tr>
            </table>
            <table width="385" border="0" cellspacing="0" cellpadding="0" class="100p" style="float:left;display:inline" align="right">
                <tr>
                    <td width="20" ></td>
                    <td background="http://msgfocus.com/files/amf_to_infinity/workspace_83/2-years.jpg" style="background-position:left; background-size:cover; float:left;" bgcolor="#0c0807" width="385" class="100nopad" valign="right" align="middle">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0" height="256">
                            <tr>
                                <td align="center">
                                    &nbsp;
                                </td>
                            </tr>
                        </table>
                     </td>
                    <td width="20"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS

    @media (max-width:630px) {
*[class="100p"] {width:100% !important; height:auto !important; text-align:center !important;}
*[class="100pad"] {width:95% !important;}
*[class="100nopad"] {width:100% !important; padding-right: 0 !important; padding-left: 0 !important; float: none !important; text-align: center;}
*[class="displayproperlyplease 100nopad"] {width:100% !important; padding-right: 0 !important; padding-left: 0 !important; float: none !important; text-align: center;}
table[class="wrapper"] {width: 100%;}
table[class="wrapper"] .fl {width: 100% !important;float: left;height: auto;}
    }

如何在移动设备上将背景图像设置为100％宽度，但是增加/减少高度以确保没有图像被切断？

缩放浮动表，背景图像保持1：1的比例

0 个答案: