0

ImageMapster jquery スクリプトを使用してイメージマップを作成しています。作成者は、画像マップのサイズをレスポンシブに変更する方法を示すフィドルを提供しています。マップがページの幅の 100% を占めるようにしたい場合に機能します。ただし、以下の例 (作成者のレスポンシブの例を使用) のように、マップの周りに境界コンテナーを配置すると、境界ボックスの幅をはるかに超えてサイズ変更されます。(以下のフィドルを表示するときは、ブラウザを拡大してみてください)。このサイズ変更コードを変更して、マップがコンテナーの幅を超えて拡大しないようにするにはどうすればよいですか? 通常の css max-width ではできません。

フィドル: http://jsfiddle.net/jQG48/999/

サイズを計算するために彼が使用するコードは次のとおりです。

function resize(maxWidth,maxHeight) {
 var image =  $('img'),
    imgWidth = image.width(),
    imgHeight = image.height(),
    newWidth=0,
    newHeight=0;

if (imgWidth/maxWidth>imgHeight/maxHeight) {
    newWidth = maxWidth;
} else {
    newHeight = maxHeight;
}
image.mapster('resize',newWidth,newHeight,resizeTime);   
}
4

1 に答える 1

1

ああ。私はアホです。これを投稿した直後に、ウィンドウのサイズ変更コードが $(window).width を参照していることに気付きました。コンテナ div に変更したところです。この場合は、それで$(.content).width解決しました。

質問を削除するつもりでしたが、公式の ImageMapster の例ではこれに関する指示が提供されていないため、他の人に役立つ場合に備えて残しておく必要があると考えました。

これが実用的なフィドルです：

http://jsfiddle.net/jQG48/1007/

于 2015-04-17T03:24:19.990 に答える