2

私はまだ適切な解決策を見つけていない興味深い問題を抱えています。ここでフィドルを表示できます：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の中央に揃えられます。

私を正しい方向に導くための助けをいただければ幸いです。

4

1 に答える 1

3

私はそれを持っていると思います。画像が縮尺どおりであることを確認することをお勧めします。http://jsfiddle.net/DgN8C/7/

基本的に、スケーリングしてからマージンを設定します。制限要因、つまり画像を拡大縮小する必要があるかどうかを示す要因は、2つの辺のうち小さい方になります。image_width * 20%したがって、ドットが80％の場合、囲んでいる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 ) );
}

それから私は身長について同じことをします。width()jQueryと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/ロジックは基本的に以下と同じですが、スケーリングする幅または高さのいずれかをインテリジェントに選択した点が異なります。1つだけ設定すると、アスペクト比が維持されます。

もう1つ編集します。http://jsfiddle.net/DgN8C/13/これは、含まれているオブジェクトに合わせて拡大と縮小の両方を行いdivます。以前のソリューションは、必要な場合にのみ大きくスケーリングしていました。

これは有益な投稿でした：jQueryのサイズとアスペクト比のサイズ変更

于 2012-10-24T23:10:27.500 に答える