Question

我正在尝试制作一个动态相当大的标题横幅，使用相当简单的图像技巧。我将横幅图像放在表格单元格中，并将表格行的背景图像设置为横幅最右边像素列的一个像素宽的重复。因此，横幅图像看起来伸展以适合屏幕宽度而不拉伸徽标。到目前为止，下面的代码是我的整个页面，问题在屏幕截图中以红色圆圈显示。这是主图像结束并且一像素宽背景图像开始的过渡。

看起来最后的一个像素宽的条被一个像素压缩 - ＆gt;使顶部正确对齐，而底部是一个像素关闭。我应该补充一点，我已经多次检查图像，以便治愈图像数据是正确的。就MSPaint而言，它们是100％准确的。

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body bgcolor="#000000">
    <form id="form1" runat="server">
    <div>

        <table style="width:100%; ">
            <tr style="background-image: url('Images/Banners/WebBannerWideBar.png')">
                                            <!--WebBannerWideBar is 1x100 px-->
                <td>
                    <img alt="Angry Octopus"
                     src="Images/Banners/WebBannerWide.png" />
                          <!--WebBannerWide is 760x100 px-->
                </td>
            </tr>
        </table>

    </div>
    </form>
</body>
</html>

http://img188.imageshack.us/img188/1958/imagealignmentproblemsm.png

Answer 1

我将横幅图像放在表格单元格中

Don't do that。这不是1997年。

将图像包裹在div中，在div上设置背景图像。调整div的填充，边框和边距以适合。调整图像的垂直对齐。

Answer 2

尝试将表格中的cellspacing和cellpadding设置为0px。

根据您不知道的某些填充，您的图像可能对于空间而言太大。

另外，您可以设置单元格的填充：

<td style="padding: 0px;"...

为什么我的图像不能正确对齐？

2 个答案: