asp.net Webアプリケーションで複数の画像を持つ特定のdivをズーム（ピンチ）する方法はありますか？

Question

トップのメニューバーと下部のデータバーを持つWebアプリケーションを作っています。中央には複数のイメージが表示されたimageMapを持つdivがあります。 imageMapピンチズームが可能な領域を作りたいので、残りのページを同じサイズに保ちながらimageMapや小さな画像を拡大することができます。私は同様の質問と解決策を見てきましたが、どちらもうまくいかないか、または私が働いた単一の画像にのみ適用しますが、画像だけでなく、ズームするためにdiv全体が必要です。

おかげ

Answer 1

はあなたのメインのdiv にいくつかのdivのを持っている場合だけで他のdivのためのクラス名を変更するとに異なる値を使用して、あなたの要素に

* { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.item { 
 
    position: relative; 
 
    
 
    border: 1px solid #333; 
 
    margin: 2%; 
 
    overflow: hidden; 
 
    width: 540px; 
 
} 
 
.item img { 
 
    max-width: 100%; 
 
    
 
    -moz-transition: all 0.3s; 
 
    -webkit-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
} 
 
.item:hover img { 
 
    -moz-transform: scale(1.1); 
 
    -webkit-transform: scale(1.1); 
 
    transform: scale(1.1); 
 
}

を、このCSSコードを使用してみてくださいクラスの