1

我使用 div 制作了一个“图像映射”，其中包含一堆<a>div。它工作正常，但现在我希望能够缩放它，以便它可以调整 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 永远不会相对于其父级的左边缘和上边缘移动。您需要将像素转换为百分比，然后当父元素调整大小时，子元素的大小和位置会增长和移动。

但是，由于您将 sprite 用于悬停伪类，因此如果您调整父 div 的大小，并且子 div 也会调整大小，设计将会中断。如果您不需要子 div 调整大小，请将其大小保留为像素值，并将顶部/左侧设置为百分比。

例如，#a1 div 设置为距顶部 138px，距左侧 28px。

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 回答