Maths - 計算調整大小的圖像的新大小

即時通訊使用一些簡單的數學來裁剪圖像，即時通過使用jQuery imageareaselect.js插件在圖像上繪製額外圖層，我可以使用光標調整大小，然後單擊按鈕作物：Maths - 計算調整大小的圖像的新大小

var div = $('.imgwrapper2'); 
    //image 
    div.css('background-image', 'url(' + bigimg + ')'); 
    //width 
    div.css('width', selection.x2 - selection.x1); 
    //height 
    div.css('height', selection.y2 - selection.y1); 
    //Position 
    div.css('background-position', -selection.x1 + 'px ' + -selection.y1 + 'px'); 
}

然後我用這些座標來繪製一個新的div和圖像設置爲與相關背景的立場，即div的背景。像這樣的東西：

<div class="imgwrapper2" style="background-image: url(&quot;http://farm6.static.flickr.com/5064/5618553713_96666c04e7.jpg&quot;); width: 368px; height: 345px; background-position: -81px -53px;"> 
</div>

這就是我的裁剪圖像。

我想要做的就是調整此圖片的大小，例如將大小增加20％或將大小縮小20％。

目前我正在使用靜態版本來獲得數學權利，重新計算使用絕對定位而不是背景位置使用div內的圖像的大小。

這是在這裏：http://jsfiddle.net/AtUmf/2/

我做什麼是由20％乘以DIV大小，但如何計算圖像中的DIV容器中的位置增加20％？

來源

2011-04-15 CLiown

在該試驗中的情況下，這兩個圖像* *是完全相同的大小。你能澄清這一點嗎？ – thirtydot 2011-04-15 13:00:36

是的，我不知道如何在保持定位正確的同時將圖像尺寸增加20％。 – CLiown 2011-04-15 13:02:27

是否這樣？

http://jsfiddle.net/AtUmf/6/

var zoomFactor = 1.2; 
var $img = $('#innerdiv2 img'); 

$img.css({ 
    width: $img.width() * zoomFactor, 
    height: $img.height() * zoomFactor, 
    left: parseInt($img.css('left'), 10) * zoomFactor, 
    top: parseInt($img.css('top'), 10) * zoomFactor, 
});

來源

2011-04-15 13:08:34 thirtydot

Maths - 計算調整大小的圖像的新大小

回答

相關問題