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

我正在使用html/jsp/javascript顯示一個靜態圖像。我試圖通過使用絕對和相對標籤固定靜態圖像上的標記。如何在html中的靜態圖像上固定標記java頁面

<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。如何鎖定圖像上的標記，以便即使在縮放或移動圖像滾動條後，標記也應該隨圖像一起自動移動。

上面的代碼，它顯示標記被鎖定在屏幕上，而不是在靜態圖像上。

來源

2016-09-22 Sai

你如何放大？使用瀏覽器縮放功能，或者你調整圖像的JavaScript？ –

通常你的方法應該工作...瀏覽器縮放也應該影響你相對於包裝div的絕對定位 – andreas

這可能有幫助 - http://codepen.io/Paulie-D/pen/dgcha –

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

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

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

含div將獲得其中移動兩個圖像滾動條，使它們保持一致。（這隻有在div小於主圖像時纔會生效，否則不需要滾動條。）

至於縮放/縮放：它取決於您如何操作。如果您使用瀏覽器的縮放功能，無論如何它都應該可以正常工作。如果你將一些CSS應用到圖像上，那麼將該CSS應用到div應該做到這一點。如果您使用javascript調整圖片大小，您可能需要進行一些計算以確定標記的新位置。

來源

2016-09-22 09:06:34 Andii

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

回答

相關問題