0

別の背景画像に画像を配置したいのですが、画面の解像度を変更すると、背景画像の上に配置したい画像の位置が変わります。以下のコードを使用します

       <div id="identification ">
            <div class="identification-image-1">
                <a href="form.html">
                    <img id="image-1" src="images/identification-1.png" alt="" />
                </a>
            </div>

            <div>
                <a href="form.html">
                    <img src="images/identification-new.png" alt="" width="100%" /> 
                </a>
            </div>
        </div>

CSS コード:

#identification {
margin-top: 20px;
position: relative;
}

.identification-image-1 {
position: absolute;
margin-top: 200px;
margin-left: 350px;
 }

注意 'images/identification-new.png' は幅 100% の背景画像です。上記のコードは私の問題を解決しますが、画面解像度を変更すると絶対位置が機能しませんでした。

4

1 に答える 1

0

マージンは、コンテナーの高さと幅のパーセンテージとして設定する必要があります。画面の解像度またはブラウザー ウィンドウのサイズが変更.identification-image-1されると、コンテナーに対して相対的に移動します。背景画像もコンテナの 100% であるため、すべてが同期されます。

例えば

.identification-image-1 {
position: absolute;
top: [your percentage];
left: [your percentage];
margin-left: [negative margin];
margin-top: [negative margin];
}

絶対配置を使用して画像を中央に配置left:50%すると、ブラウザの左端が中央に移動します。imgWidth/2 の負のマージンを使用すると、画像の中心がブラウザの中心に配置されます。

于 2013-10-30T19:24:36.180 に答える