CSS：使图像中的div盒相对于图像大小

我正在显示可以放大和缩小的缩略图列表。在每个缩略图的顶部，我需要放置可供用户选择的文本（我使用jQuery UI可选）。CSS：使图像中的div盒相对于图像大小

在这里我有什么（上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>

当图像尺寸的变化，我需要什么，以保持在相同的相对位置股利盒（这样做的jQuery UI选择仍然有效）？我需要在图像和div上指定一些相对测量值的容器吗？

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

来源

2010-11-24 StackOverflowNewbie

不需要添加你自己的``。只需从左侧的菜单中选择它。我也没有看到图像大小调整，你有没有把它包含在模型中？ – david 2010-11-24 23:46:52