Question

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

问题在于我希望能够调整图像大小以适应用户的浏览器而无需滚动。为了做到这一点，我需要覆盖控件的absoloute定位来调整它们在缩放图像上的位置。

目前，我正在铺设东西：

<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。

EG。我强制图像为500x500而不是1000x1000。我需要div将它的位置调整到250x250并调整它的宽度/高度。

Answer 1

只要你不设置要显示的div：block;你应该宽度应自动调整其内容宽度。如果您想要安全，可以设置宽度：auto;

Answer 2

为了扩展@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 ，您可以通过更改CSS中.container的维度并点击“运行”来进行实验，以便相应地查看链接重新定位。

有两点需要注意：

您可能想要优化移动链接的数学方法。例如，要将链接置于一对坐标（不仅仅是其左上角）上，您需要从其坐标中减去1/2高度和1/2宽度。这完全取决于您以及您如何在视觉上锚定它们。对于coord而不是“center”，你需要在CSS中给出链接top和left属性，然后在jQuery中找到它们，并做更多的数学运算，例如如果链接位于top:42并且容器缩小1/3高度，则通过除以42/3等设置top:14
有很多方法可以完成整个设置。我建议将图像用作包装器的background-image属性，而不是<img> DOM元素。这可能会清除您遇到的一些间距问题，或者可能在未来发生的display属性之间发生冲突。像jQueryUI和Bootstrap这样的响应式框架可能会默认内置您要查找的内容，因此请仔细阅读并了解它们提供的内容。

覆盖图像上的链接，允许调整图像大小

2 个答案: