放大和縮小時如何防止圖像移位？

Question

（請注意，我們仍然是Web開發的新手，我只是加入團隊來提供幫助，因此不知道html代碼的確切含​​義）

我試圖在stackoverflow上尋找類似的問題，但不是所有人都有完全相同的問題。 我正在嘗試幫助團隊進行Web開發。 他們遇到的一個問題是，當用戶放大或縮小圖像時，圖像將不會保留在它們各自的氣泡中（參見圖像）。 這是網站： http : //2016.igem.org/Team : Rice

這是一些負責圖像的標記的示例：

                <div>
                <img src="http://2016.igem.org/wiki/images/e/ed/Bubble_background.png"
                 style="float:center;position:relative;left:50%">

                <img id = bubble                 
                src="http://2016.igem.org/wiki/images/f/fd/Sub_bubble_12.png" width= 72px  
                style ="position:absolute;left:64.1%;top:35.3%"> 
                </div>

第一張圖片是紫色氣泡，理想的是將“氣泡”圖像放在粗大的圓圈內。 而且無論縮放與分辨率的差異如何，如果他們都留在圈子中，那就太好了。

我嘗試過的方法：我嘗試過更改位置屬性，但這似乎並沒有太大作用。 我也嘗試將百分比更改為像素。 通過在放大和縮小時保持圖像靜止不動來工作時，當我在另一台分辨率不同的計算機上進行檢查時，照片仍然被擰緊。

Answer 1

我最終將div元素更改為position：absolute

             <div sytle = "position: absolute">

             <img src="http://2016.igem.org/wiki/images/e/ed/Bubble_background.png"
             style="float:center;position:relative;left:50%">

            <img id = bubble                 
            src="http://2016.igem.org/wiki/images/f/fd/Sub_bubble_12.png" width= 72px  
            style ="position:absolute;left:64.1%;top:35.3%"> 
            </div>

到目前為止，這似乎可以解決問題

Answer 2

您需要在背景圖片上使用position:absolute 。