Question

我有一个有趣的问题，我还没有找到合适的解决方案。你可以在这里查看小提琴：http://jsfiddle.net/DgN8C/3/。基本上，我有一个特定大小的图像。该图像需要按比例缩小，以便用户选择的中心点（由红点表示视觉和数据中心 - *属性[这些是基于图像宽度/高度的百分比]）位于包含div的中间（在示例中x，y为50,50）。因此，在理想的世界中，给出以下图像：

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

100 x 100 div内的理想定位高度为138px，左边距为-72px。这将确保图像中心的红点（再次看到小提琴）与包含div的中心对齐。

任何有助于我朝着正确方向前进的帮助都将非常感激。

Answer 1

我想我已经明白了。您可能想要检查图像是否可以缩放。 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)));

编辑好的，首次尝试并未保留宽高比。现在应该修好。 http://jsfiddle.net/DgN8C/9/逻辑与下面的基本相同，只是我智能地选择宽度或高度进行缩放。只设置一个将保留纵横比。

编辑还有一个。 http://jsfiddle.net/DgN8C/13/这会扩大和缩小以适应包含div对象。以前的解决方案只在必要时扩大规模。

这是一篇有用的帖子：jQuery resize to aspect ratio

使用jQuery＆amp; Sc缩放/裁剪图像CSS

1 个答案: