如何在html java頁面中固定靜態圖像上的標記

Question

我正在使用html / jsp / javascript顯示一個靜態圖像。 我試圖通過使用絕對和相對標簽在靜態圖像上固定標記。

<div style="position: relative; left: 0; top: 0;">
<img src="a.jpg" style="position: relative; top: 0; left: 0;"/>
<img src="b.jpg" style="position: absolute; top: 25px; left: 25px;"/>
</div>

問題是當我縮放圖像時，標記保持在屏幕上相同的25px，25px。 如何鎖定圖像上的標記，以便即使在縮放或移動圖像滾動條后，標記也應隨圖像一起自動移動。

使用上面的代碼，它會出現標記鎖定在屏幕上，而不是靜態圖像上。

Answer 1

如果您只是滾動或縮放圖像本身，則標記不受影響並保持不變。 相反，嘗試更改包含兩個圖像的整個div元素。

例如，如果你做了這樣的事情：

<div style="position: relative; overflow: auto; width: 100; height: 100;">
  <!-- both images here -->
</div>

包含div將獲得滾動條，移動兩個圖像，使它們保持對齊。 （這僅在div小於主圖像時生效，否則不需要滾動條。）

至於縮放/縮放：這取決於你是如何做的。 如果您正在使用瀏覽器的縮放功能，它無論如何都應該有效。 如果你將一些CSS應用於圖像，那么將該CSS應用於div應該可以解決問題。 如果您使用javascript調整圖像大小，則可能需要進行一些計算以確定標記的新位置。