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