Question

我正在显示可以放大和缩小的缩略图列表。在每个缩略图的顶部，我需要放置用户可选择的文本（我正在使用jQuery UI Selectable）。

我在这里（http://jsfiddle.net/jEkaa/2/上的完整代码）：

<ul>
    <li class="selectable">
        <a href="">
            <img src="http://placehold.it/400x400" width="400" height="400"></img>
        </a>
        <div style="position: absolute; width: 3.93em; height: 1.86em; border-style: solid; border-width: 1px; left: 6.81em; top: 11.57em;">400</div>
        <div style="position: absolute; width: 1.13em; height: 1.86em; border-style: solid; border-width: 1px; left: 11.57em; top: 11.57em;">x</div>
        <div style="position: absolute; width: 3.93em; height: 1.86em; border-style: solid; border-width: 1px; left: 13.43em; top: 11.57em;">400</div>
    </li>
<ul>

当图像大小发生变化时，我需要做些什么才能将div框保持在相同的相对位置（以便jQuery UI Selectable仍然有效）？我是否需要围绕图像和div指定一些相对测量值的容器？

我正在将div添加到现有应用程序中。所以，div的位置并不是一成不变的;也许他们应该进入锚标签？

Answer 1

如果您愿意使用文本标签的百分比来定位和调整大小，则只需添加容器div并在调整图像大小时调整其大小：

http://jsfiddle.net/ym4gE/4/

CSS：在图像中相对于图像大小制作div框

1 个答案: