3

画像を拡大（ズームイン）および縮小（ズームアウト）して、アスペクト比を維持できるようにしたい。

簡単な例を作成しましたが、アスペクト比を維持する方法がわかりません。

縮小時の最小サイズも設定できますか？

ありがとう

HTML

<div id="image-container">
     <img src="Image.jpg" alt=""/>
</div>
<div id="image-controls">
     <input id="zoom-in" value="+" type="submit" />
     <input id="zoom-out" value="-" type="submit" />
</div>

JQuery

$(document).ready(function() {

var img = $('#image-container img');
var zoomWidthIncrement = img.width() * 1/3;
var zoomHeightIncrement = img.height() * 1/3;

$("#zoom-in").click(function (e){
    img.css({width: img.width() + zoomWidthIncrement, height: img.height() + zoomHeightIncrement});
e.preventDefault();
});

$("#zoom-out").click(function (e){
    img.css({width: img.width(function(i, w) { return w - zoomWidthIncrement; }), height: img.height(function(i, w) { return w - zoomWidthIncrement; })
});
e.preventDefault();
});
});
4

1 に答える 1

1

幅または高さを変更するだけで、両方を変更することはできません。ブラウザは画像を比例して自動的に拡大縮小します。

jsFiddleの例。

于 2012-04-30T02:45:02.540 に答える