javascript - 画像付きのズーム可能な内部 div 要素

Question

次の問題を解決しようとしています。

状況：

画像を含む外側の div があります。さらに、複数の内部 div が含まれます。

問題：

外側のdivをズーム/サイズ変更せずに、div内の画像をズームしたい。さらに、外側の div はスクロールバーを提供する必要があります (overflow: scroll または overflow: auto css オプションを使用)。そして、内側の div (正方形や円のような要素) はその位置を保持する必要があります。つまり、画像が 16 個のフィールドからなる画像であると想像してください。フィールド番号に四角を入れました。2/2 (行 2、列 2)。ズームすると、画像のサイズが変更され、正方形がその位置を保持するため、位置を失いたくありません。

これは私の構造です：

#divOuter { 位置:相対; 境界線: 3px 単色の赤。高さ:400px; 幅:1000px; オーバーフロー: 自動; フォントサイズ: 12px; 変換元: 左上; -o-transform-origin: 左上; -moz-transform-origin: 左上; -webkit-transform-origin: 左上; -ms-transform-origin: 左上。z-index:1}

<div id="divOuter" >
    <img id="image" width="800" height="400" src="../../Imagefiel.jpg" alt="">
    </img>
    <div id="circleID" title="circle11" style="border: 1px solid black; border-radius:   
    10px; width: 20px; height: 20px; position:absolute;left: 579px; top: 262px; background-
    color: green; z-index:3">
    </div>
</div>

私はすでに2つのことを試しました: - 変換/スケールによるズーム ほぼ希望どおりに動作しますが、外側のdivもサイズ変更されていますが、そうすべきではありません。これらのコマンドを使用しました: $("#divTest").css('transform', 'scale(' + parseFloat(nScale / 100) + ')'); $("#divTest").css('font-size', nScale);

• 画像サイズ (幅/高さ) を大きくする 問題: 内側の div の位置が失われ、フィールドの外に出て、画像のサイズ変更/移動が行われませんでした

誰かがこの問題で私を助けてくれれば、本当に感謝しています。

ありがとう、サンチェス

編集:私はそれを解決できました:)外側のdivの中にさらにdiv(位置:相対)を含めてズームしました。そうすれば、内側の要素は外側の相対 div に対して相対的に配置されます。