1

かなり単純な画像トリックを使用して、動的にサイズ変更可能なタイトル バナーを作成しようとしています。バナー画像を表のセルに配置し、表の行の背景画像を、バナーの右端のピクセル列の 1 ピクセル幅の繰り返しに設定します。したがって、ロゴを引き伸ばすことなく、バナー画像が画面の幅に合わせて引き伸ばされて表示されます。以下のコードは、これまでのところ私のページ全体であり、問​​題はスクリーンショットの赤い丸で示されています。これは、メイン イメージが終了し、1 ピクセル幅の背景イメージが始まるトランジションです。

最後の 1 ピクセル幅のバーが 1 ピクセル圧縮されているように見えます。つまり、上部が適切に整列し、下部が 1 ピクセルずれています。画像データが正しいことを確認するために、画像を複数回チェックしたことを付け加えておきます。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

4

2 に答える 2

2

バナー画像を表のセルに配置します

そうしないでください。これは1997年ではありません。

画像を div でラップし、背景画像を div に設定します。div のパディング、ボーダー、およびマージンを調整して収まるようにします。画像の垂直方向の配置を調整します。

于 2009-08-06T21:22:18.827 に答える
1

テーブルのセル間隔とセルパディングを 0px に設定してみてください。

認識していないパディングに基づいて、画像がスペースに対して大きすぎる可能性があります。

また、セルのパディングを設定することもできます:

<td style="padding: 0px;"...
于 2009-08-06T21:21:26.567 に答える