html - 缩放时保持图像正确显示 (HTML)

Question

我有一个带有表单标签的网页。在表单标签之外(在主体中)我想在表单标签的左侧设置一个背景图像(该背景图像的目标是从主体的黑色背景颜色渐变到表单颜色是灰色)

我的问题是，当“放大”浏览器时(显然是向窗体方向缩放)，我预计图像会逐渐超出屏幕，但事实是图像仍在显示，但它会消失放大时变暗。最后，屏幕的左边缘变黑。我看起来像图像不接受离开屏幕。

放大前:

放大后:

使用的图像:

我的代码:

table cellspacing="0" cellpadding="0" class="myTable">
<tr>
    <td class="TopLeft">
    </td>
    <td class="Top">
    </td>
    <td class="TopRight">
    </td>
</tr>
<tr>
    <td class="Left">
    </td>
    <td>
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td class="mTop" colspan="3">
                </td>
            </tr>
            <tr>
                <td class="mLeft">
                </td>
                <td class="middle">

                <form id="Form1" runat="server">

                    <div class="page">

                        <div class="main">
                            ASDFGGH
                            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>                                

                        </div>
                    </div>
                </form>



                </td>
                <td class="mRight">
                </td>
            </tr>
            <tr>
                <td class="mBottom" colspan="3">
                </td>
            </tr>
        </table>
    </td>
    <td class="Right">
    </td>
</tr>
<tr>
    <td class="BottomLeft">
    </td>
    <td class="Bottom">
    </td>
    <td class="BottomRight">
    </td>
</tr>

我将只放置类的 CSS:“Left”

.Left
{
    width: 113px;
    height: 761px;
    background-image: url('../Images/L.jpg');    
}

谢谢...

Answer 1

我不确定这是一个可以有确定答案的问题。对于浏览器应如何放大页面， 没有可接受的标准。 Firefox、IE 和 Chrome 的做法各不相同。除了 Firefox 之外，其他浏览器是否也存在同样的问题？

您可能还想考虑修改您的代码，以便它使用 div 而不是表格来布置页面，尽管这会花费一些精力。这可能会导致页面按您预期的方式缩放。

有没有我们可以去查看所有代码的地方，以便我们可以摆弄它并可能更容易地确定潜在的解决方案？