使用jQuery和CSS縮放/裁剪圖像

我有一個有趣的問題，我還沒有找到適當的解決方案。您可以在這裏查看小提琴：http://jsfiddle.net/DgN8C/3/。基本上，我有一個特定大小的圖像。該圖像需要縮小，以便用戶選擇的中心點（由紅點視覺和data-center- *屬性[這些是基於圖像寬度/高度的百分比]指示）位於包含div的中間位置（在本例中爲50,50的x，y）。所以，在一個理想的世界，給下面的圖片：使用jQuery和CSS縮放/裁剪圖像

<img src="image-source" data-center-x="59.125" data-center-y="37.4296" />

100×100格內理想的定位將有138px的高度與-72px的左邊距。這將確保圖像中心的紅點（再次看到小提琴）與包含div的中心對齊。

任何幫助讓我走在正確的方向將不勝感激。

來源

2012-10-24 sdover102

這幾乎正是我試圖完成：http://jsfiddle.net/W4seR/10/。如果這裏的紅點是我的圖像上的紅點，並且圖像填充了空間（以紅點爲中心），那就完美了。 – sdover102

我想我已經明白了。您可能需要檢查圖像是否需要縮放。 http://jsfiddle.net/DgN8C/7/

基本上，我縮放，然後設置邊距。限制因素或告訴我們是否需要縮放圖像的因素將是雙方中較小的一個。因此，如果點爲80％，我們需要點和右側（image_width * 20%）之間的像素寬度以適應我們的封閉div對象（obj_width/2）。注意if語句。

因此，如果我們的圖像不適合對象，我們需要將其放大。不知怎的，我做到了。好好想想。

// First, we need to scale image so that it will fit within the dimensions 
// of the object. The limiting factor is shorter side of the pixel 
limit = Math.min(center_x, 100-center_x)/100.0; 

// Check if image needs to be scaled 
if ((obj_width/2) > (limit*img.width())) { 
    // Image must be scaled 
    chunk = limit * 2; // Section we need from image 
    // image_width * chunk = obj_width 
    img.width(Math.ceil(obj_width/chunk)); 
}

然後我做同樣的事情的高度。它看起來像jQuery的width()和height()函數保持一切規模。可能需要進一步測試。

然後我改變邊距。

img.css('margin-left', -1 * (((center_x/100.0)*img.width()) - (obj_width/2))); 
img.css('margin-top', -1 * (((center_y/100.0)*img.height()) - (obj_height/2)));

EDIT好的，在第一次嘗試未保留寬高比。現在應該修復。 http://jsfiddle.net/DgN8C/9/除了我智能地選擇寬度或高度來縮放外，邏輯與下面的基本相同。只設置一個將保持寬高比。

編輯一個。 http://jsfiddle.net/DgN8C/13/這將縮放比例變大以適合包含div對象。如果需要，以前的解決方案只能擴大。

這是一個有用的帖子：jQuery resize to aspect ratio

來源

2012-10-24 23:10:27

嘿男人。這是如此接近......這不能做的唯一事情是縮放圖像的寬度/高度（如果您檢查元素，圖像大小保持不變） – sdover102

http://jsfiddle.net/DgN8C/13/ –

真棒！奇蹟般有效。 – sdover102

使用jQuery和CSS縮放/裁剪圖像

回答

相關問題