1

div の中にたくさんの div を使用して「イメージ マップ」を作成しました<a>。正常に動作しますが、divのサイズを変更できるようにスケーリングできるようにしたいのですが、<a>divに対して同じ位置にとどまります。

<div class="container">
    <a href="#a1" class="dot" style="top: 138px; left: 28px"></a>
    <a href="#a18" class="dot" style="top: 45px; left: 261px"></a>
    <a href="#a20" class="dot" style="top: 45px; left: 336px"></a>

そしてCSS

#kit .container {
position: relative;
margin: auto;
background-image: url(../img/9829-Kit.png);
background-repeat: no-repeat;
height: 670px;
width: 700px;
}
a.dot {
position: absolute;
display: block;
height: 33px;
width: 34px;
cursor: pointer;
background-position: 0px 0px;
background-image: url(../img/dots.png);
background-repeat: no-repeat;
}
a.dot:hover {
background-position: 0px -40px;
cursor: pointer;
}
4

1 に答える 1

0

オフセットにピクセルを使用しているため、divは親の左端と上端を基準にして移動することはありません。ピクセルをパーセンテージに変換する必要があります。そうすると、親のサイズが変更されると、子要素のサイズと位置が大きくなり、移動します。

ただし、ホバー疑似クラスにスプライトを使用しているため、親divのサイズを変更するとデザインが壊れ、子divのサイズも変更されます。子divのサイズを変更する必要がない場合は、サイズをピクセル値のままにし、上/左をパーセンテージとして設定します。

たとえば、＃a1 divは、上から138ピクセル、左から28ピクセルに設定されています。

28px / 700px（親の幅）* 100 = 0.4％

138px / 670px（親の高さ）* 100 = 20.597015％

したがって、＃a1 divは、left：0.4％およびtop：20.597015％に設定する必要があります。

マージンを使用していない限り、これは機能すると思いますが、実際の絶対位置を使用します。そうでない場合は、親divのサイズが変更されるたびに、javascriptを使用してパーセンテージをピクセル値（親サイズに基づく）に変換する必要があります。

于 2013-01-25T15:18:12.403 に答える