ズームイン/ズームアウト時に画像がずれるのを防ぐにはどうしたらいいですか？

Question

（私たちはまだWeb開発には新しく、ちょうど助けにチームに参加しているので、htmlコードの正確さは分かりません）

私は同様のためにstackoverflowを見ようとしました人々の質問ではなく、全く同じ問題があります。私はチームのウェブ開発を手助けしようとしています。彼らが持っている1つの問題は、ユーザーが拡大または縮小したときに画像がそれぞれの泡（画像参照）内に残らないことです。ここでは、ウェブサイトには、次のとおりです。ここで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

背景画像にposition:absoluteを使用する必要があります。

Answer 2

私が位置するdiv要素を変更することになった：絶対

   <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> 

これまでのところ、これは注目すべきトリック