html - 在图像上叠加链接，允许调整图像大小

Question

我正在尝试在图像上叠加一些链接。这些链接会触发弹出式可编辑字段，但这无关紧要。

问题是我希望能够在不需要滚动的情况下调整图像的大小以适合用户的浏览器。为此，我需要重叠控件的绝对定位，以根据缩放图像调整它们的位置。

目前我是这样安排的:

<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 并调整其宽度/高度。

Answer 1

只是为了扩展 @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 property看看它对你的表现如何。

这是一个 fiddle ，您可以通过更改 .container 的尺寸进行试验在 CSS 中并点击“运行”以查看链接相应地重新定位。

需要注意两点:

• 您可能想要改进如何移动链接的数学运算。例如，要使链接在一对坐标(不仅仅是其左上角)上居中，您需要从其坐标中减去 1/2 的高度和 1/2 的宽度。这完全取决于您以及您如何在视觉上锚定它们。对于“中心”以外的坐标，您需要提供链接 top和 left CSS 中的属性，然后在 jQuery 中找到它们，并做更多的数学运算，例如如果链接位于 top:42并且容器缩小了其高度的 1/3，设置 top:14除以 42/3 等。
• 有很多方法可以完成整个设置。我建议考虑将图像用作 background-image包装器的属性，而不是 <img> DOM 元素。这可能会解决您遇到的一些间距问题，或者您的 display 之间的冲突。 future 可能发生的特性。响应式框架，如 jQueryUI和 Bootstrap默认情况下可能内置了一些您正在寻找的内容，因此请看一下它们并了解它们提供的内容。