我正在尝试在图像上覆盖一些链接。这些链接触发弹出框可编辑的字段，但这无关紧要。
问题是我希望能够无需调整滚动即可调整图像大小以适合用户的浏览器。为此，我需要重叠控件的绝对位置来调整其位置以适应缩放后的图像。
目前，我正在按照以下方式进行布局：
<div style="position: relative;">
<!-- the image fill the div for the sake of this example assume img is 1000px square -->
<img src="bigimg.png">
<!-- a number of divs like this create links over the image
<div style="left: 500px; top: 500px; position:absolute;">
<a style="display:block; width:397px; height:27px;" class="editable editable-click editable-empty">Link Name</a>
</div>
</div>
最好的选择是，如果图像上有强制的大小，或者设置为填充特定大小的div，则自动调整div的位置。
例如。我将图片的大小设为500x500，而不是1000x1000。我需要div将其位置调整为250x250，并调整其宽度/高度。
只是为了扩展@mcmac的注释，这里有一个快速而肮脏的jquery函数，该函数查找包装器的尺寸，然后将其子图像设置为相同的尺寸。然后，它使用这些相同的尺寸将链接绝对定位在包装内的图像上方。
function resizeImg() {
var container = $('.container'), // this wraps the image and link
containerH = container.height(),
containerW = container.width(),
image = $('.container img'),
link = $('.link');
image.height(containerH) // set image height to container height
.width(containerW), // set image width to container width
link.css('left', containerW/2) // move link halfway from left edge of container
.css('top', containerH/2); // and halfway from top of container
}
$(resizeImg)
这是我使用的HTML：
<div class="container">
<img src="http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png" />
<div class="link">
<a href="http://google.com">Link</a>
</div>
</div>
您可能希望此功能不仅可以在准备好文档的位置（因为我在这里使用速记$(resizeImg)）上运行，还可以在resize上运行。如果让用户手动调整图像容器的大小，请查看CSS3的resize属性，并了解它的行为。
这是一个小提琴，您可以通过更改.containerCSS的尺寸并单击“运行”进行试验，以查看链接本身的位置。
有两件事要注意：
top和left属性，然后在jQuery中查找链接和属性，并进行更多的数学运算，例如，如果链接位于top:42且容器缩小高度的1/3，则设置top:14除以42/3等background-image包装器的属性，而不是<img>DOM元素。这可能会清除您遇到的一些间距问题，或者display可能在将来发生的属性之间的冲突。诸如jQueryUI和Bootstrap之类的响应式框架可能在默认情况下内置了您要查找的一些内容，因此请给他们一个外观，看看它们提供了什么。本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句