2

以下のコードは、高さによるアスペクト比で画像のサイズを変更するのに非常にうまく機能し、幅で別の関数を作成することもできます。ただし、画像を高さまたは幅で縮小する必要があるかどうかは常にわかりません。

たとえば、画像のサイズを変更する必要があるスペースが幅100、高さ100で、画像が150 x 90の場合、その幅を縮小する必要があります。画像が80x160の場合、高さを小さくする必要があります。

だから私が求めているのは、幅と高さの両方のパラメーターに合うようにアスペクト比で画像を縮小するように、以下のコードをどのように変更できるかということです。ありがとう。

jQuery.fn.resizeHeightMaintainRatio = function(newHeight){
if (this.aspectRatio == undefined) 
this.aspectRatio = parseInt($(this).width() / $(this).height());
$(this).height(newHeight); 
$(this).width(newHeight * this.aspectRatio);
}

さらに詳しく調べてみると、更新されたバージョンもダンも正しく機能していないようだったので、コードをもう一度編集しました。アスペクト比が失われたので、ここにもう1つあります。私は1つの画像でそれを試しましたが、これまでのところ非常に優れています。ここにあります、

        jQuery.fn.resizeMaintainRatio = function(newHeight, newWidth){
            widthRatio = parseInt($(this).width() / newWidth);
            heightRatio = parseInt($(this).height() / newHeight);

            if(heightRatio > widthRatio)
            {

                this.aspectRatio = parseInt($(this).css("width") / $(this).css("height"));

                $(this).css("height", newHeight);
                $(this).css("width", newHeight * this.aspectRatio);

            }
            else{

                this.aspectRatio = parseInt($(this).css("height") / $(this).css("width"));

                $(this).css("width", newWidth);
                $(this).css("height", newWidth * this.aspectRatio);

            }

        }

注：さらに使用した後、上記のコードは非常に奇妙に機能します。代わりにこれを試してください -http://plugins.jquery.com/project/kepresize

4

3 に答える 3

3

次のコードは、どちら側をスケーリングする必要があるかを判断し (非正方形のボックスで動作し、単に幅と高さをチェックするだけでは機能しません)、それに応じてスケーリングします。

画像が newWidth*newHeight ボックスよりも小さい場合は、画像も拡大されます。拡大したくない場合は、比率を切り替えて、幅または高さが> 1であるかどうかを確認してから、スケールを実行します。

免責事項: コードは実行されていませんが、概念は正しいはずです。

EDIT OPの修正で更新されました。

jQuery.fn.resizeHeightMaintainRatio = function(newHeight, newWidth){
   widthRatio = parseInt($(this).width() / newWidth);
   heightRatio = parseInt($(this).height() / newHeight);
   if(widthRatio < 1 && heightRatio < 1){
      widthRatio = heightRatio;
      heightRatio = widthRatio;
   }
   if(widthRatio > heightRatio){
      $(this).width(newWidth); 
      $(this).height(newHeight / widthRatio);
   } else
   {
      $(this).height(newHeight); 
      $(this).width(newWidth / heightRatio);
   }
}
于 2009-11-15T18:11:40.870 に答える
1

$(this).width() > $(this).height() true の場合はそのコードの width-version を呼び出し、それ以外の場合はその正確なバージョンを呼び出すかどうかを確認する必要があります。

于 2009-11-15T18:08:32.097 に答える
0

そこにコピーとペーストの量の会計はありませんええ！私もこれを知りたかったのですが、私が見たのは、スケーリングの幅または高さの無限の例だけでした。

  • ループを必要とせずに幅と高さのサイズを変更します
  • 画像の元の寸法を超えない
  • 適切に機能する数学を使用します。つまり、幅/高さのアスペクト、および高さ*幅のアスペクトで、画像が実際に適切に上下に拡大縮小されます：/

javascriptまたは他の言語に変換するのに十分簡単である必要があります

//////////////

private void ResizeImage(Image img, double maxWidth, double maxHeight)
{
    double srcWidth = img.Source.Width;
    double srcHeight = img.Source.Height;

    double resizeWidth = srcWidth;
    double resizeHeight = srcHeight;

    double aspect = resizeWidth / resizeHeight;

    if (resizeWidth > maxWidth)
    {
        resizeWidth = maxWidth;
        resizeHeight = resizeWidth / aspect;
    }
    if (resizeHeight > maxHeight)
    {
        aspect = resizeWidth / resizeHeight;
        resizeHeight = maxHeight;
        resizeWidth = resizeHeight * aspect;
    }

    img.Width = resizeWidth;
    img.Height = resizeHeight;
}
于 2011-04-13T19:47:10.973 に答える