3

コンテナ DIV 内の使用可能なスペースを占有するために画像が CSS でスタイル設定されて拡大または縮小される場合、画像マップ領域の座標を変化する画像サイズと同期させるには、どのような手順を実行する必要がありますか?

img {
    /*  border: 2px dotted red; */
    width:100% !important;
    max-width: none !important;
    height: auto !important;
}
div {width: 100%; height: auto}

プラグインのscaleMap: trueプロパティはこのシナリオを処理しますか? または、追加の手順を実行する必要がありますか? scaleMap だけを使用して動作させることはできませんでしたが、scaleMap の機能を誤解している可能性があります。ユーザーがブラウザ ウィンドウをドラッグして広げたり狭めたり、タブレット デバイスで向きを変更したりする状況を処理しますか?

http://jsfiddle.net/juvyh/1309/

4

3 に答える 3

8

ドキュメントは正確には明確ではありません。は、最初にレンダリングされscaleMapたイメージのサイズに合わせてイメージマップをスケーリングします。css likeを使用して、実際にはそのサイズではない画像を提示すると、うまく機能し、画像マップのサイズが変更されます。width: 200px; height: 400px;

ただし、ページが最初に読み込まれた後、ユーザーが開始したスケーリング イベントは処理されません。したがって、css likewidth: 100%;は良い考えではありません。最初の読み込みで画像マップを調整しますが、ユーザーがビューポートのサイズを変更しても何も起こりません。その意図は、レスポンシブ デザインではなく、ネイティブ サイズで表示されない画像を処理することでした。

ただし、レスポンシブ デザインで ImageMapster を使用することはできますが、画像のサイズを変更するタイミングを伝える必要があります。「Fiddle with it」の下の「デモ」ページに例があります。

「ブラウザ ウィンドウのサイズに合わせてイメージマップを自動的に調整するにはどうすればよいですか?

resizeコードは基本的にサイズ変更イベントをキャプチャしてバッファリングし、それに応じて ImageMapster のメソッドを呼び出します。これはおそらく次のバージョンでネイティブ機能になるので、プロポーショナル css を使用できます。今のところ、例のテクニックをコピーするだけです。

于 2013-05-24T13:47:34.287 に答える
0

元のフォームを維持するための 1 つのソリューションが存在する

   var time = 300;     
   var resizeDelay = 100;   
   var savedWidth = $('img').width();
   var savedHeigth = $('img').height(); 
   var savedWindowWidth = $(window).width();
   var savedWindowHeight = $(window).height();
   function resize(newWinWidth, newWinHeight) {          
       var newImgWidth = 0;
       var newImgHeight = 0;
       newImgWidth = (newWinWidth * savedWidth) / savedWindowWidth;  
       if($(window).height< savedWindowHeight){
           newImgHeight = (newWinHeight * savedHeigth) / savedWindowHeight;
       }
       if (savedWindowWidth === $j(window).width()) {
           $('img').mapster('resize', savedWidth, savedHeigth, time);
       }
       else {
           $('img').mapster('resize', newImgWidth, newImgHeight, time);
       }
   }
   function onWindowResize() {
       var curWidth = $j(window).width(),
               curHeight = $(window).height(),
               checking = false;
           if (checking) {
               return;
           }
           checking = true;
           window.setTimeout(function () {
               var newWidth = $(window).width(),
                  newHeight = $(window).height();
               if (newWidth === curWidth &&
                   newHeight === curHeight) {
                   resize(newWidth, newHeight);
               }
               checking = false;
           }, resizeDelay);
   }
   $(window).bind('resize', onWindowResize);
于 2016-11-11T19:54:07.787 に答える