放大和缩小时如何防止图像移位？

Question

（注意，我们仍然是网络开发的新手，我刚刚加入了团队帮助，因此不知道html代码的确切内容）

我试图在stackoverflow上查找类似的问题，但不是人们有完全相同的问题。我正在尝试通过他们的网站开发帮助团队。他们遇到的一个问题是，当用户放大或缩小时，图像不会保留在各自的气泡内（见图像）。这是网站：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>

第一张照片是紫色泡泡，理想的是拥有＆＃34;泡泡＆＃34;图像在burbles圈内;无论缩放或分辨率的差异如何，如果他们留在圆圈中会很好。

我尝试过的事情： 我试图改变位置属性，但这似乎没有做多少。我还尝试将百分比更改为像素。虽然这可以通过在我放大和缩小时保持图像不变来实现，但当我检查另一台具有不同分辨率的计算机时，图片仍然被拧紧。

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。