2

私の Web ページは 2 つのもので構成されています。任意のウィンドウのサイズに合わせてサイズ変更される画像と、画像の上の特定の場所に配置された 4 つのテキスト ボックスを含むフォームです。

私の問題は、テキストボックスがウィンドウのサイズ変更時に位置からずれることです。css と jquery ですべてを試すのに 6 時間以上費やしましたが、何もうまくいきません。

http://jsfiddle.net/ndqna/

<!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>
<title></title>
<style type="text/css">
    body
    {
        margin: auto;
        width: 100%;
    }

    .Wrapper
    {
        position:relative;
        min-width: 500px;
        width: 100%;
        margin:auto;
    }

    .Image
    {
        max-width: 1150px;
        max-height: 1453px;
        width: 100%;
    }

    .Form
    {
        position: relative;
        top:-260px;
        left: 200px;
        width: 130px;
        border: solid 1px #000;
    }
</style>
</head>
  <body>
      <div class="Wrapper">
        <div>
            <img src="image.png" class="Image" />
        </div>
        <div class="Form">
            <input type="text" />
            <br />
            <input type="text" />
            <br />
            <input type="text" />
            <br />
            <input type="text" />
        </div>
    </div>
 </body>
</html>

フル ウィンドウ:ここに画像の説明を入力

ウィンドウのサイズ変更:ここに画像の説明を入力

4

2 に答える 2

2

まず、ラッパーに最大寸法を設定し、画像の幅を 100% にする必要があります。また、フォームを相対ではなく絶対に配置し、下から配置する必要があります。このようなもの: http://jsfiddle.net/ndqna/2/

そうは言っても、効果はまだ100％完璧ではありません. 画像の拡大縮小に合わせて、フォームの位置を変更する必要があります。パーセンテージを使用して位置に近づくことができます。このようなもの: http://jsfiddle.net/ndqna/3/

.Form
{
    position: absolute;
    bottom: 10%;
    left: 15%;
    border: solid 1px #000;
}

お気づきのとおり、まだ完全ではありません。本当に正確な位置が必要な場合は、スクリプトを作成して正確な位置を計算する必要があります。ただし、jQuery コードを書き始める前に、「ボックス」をフォームの背景として設定し、ソース画像をスライスしてページの背景画像から削除してみませんか? この方法では、ボックスがフォームに沿って移動するため、配置をピクセル単位で行う必要はありません...

于 2013-04-11T18:58:08.707 に答える
1

これはおそらく、ラッパー css が原因です。最小幅または最大幅を使用しないでください。固定幅を使用してください。

.Wrapper
    {
        position:relative;
        width: 945px;
        margin:auto;
    }

フィドル

于 2013-04-11T18:33:31.927 に答える