jQueryのサイズの変更に比

Question

方法を教えてくださいサイズ変更画像にjQueryへの一貫した縦横比となります。例えば、設定の最大高さと幅のサイズの変更ます。感謝。

Answer 1

あなたはこれを手動で計算することができ、

すなわち：ます。

function GetWidth(newHeight,orginalWidth,originalHeight)
{
if(currentHeight == 0)return newHeight;
var aspectRatio = currentWidth / currentHeight;
return newHeight * aspectRatio;
}

あなたはそれ以外の場合は、時間の経過とともに低下します画像の元の値を使用していることを確認します。

編集：例えばjQueryのバージョン（テストされていない）

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

Answer 2

ここであなたがやりたいかもしれない便利な機能があります：

jQuery.fn.fitToParent = function()
{
    this.each(function()
    {
        var width  = $(this).width();
        var height = $(this).height();
        var parentWidth  = $(this).parent().width();
        var parentHeight = $(this).parent().height();

        if(width/parentWidth < height/parentHeight) {
            newWidth  = parentWidth;
            newHeight = newWidth/width*height;
        }
        else {
            newHeight = parentHeight;
            newWidth  = newHeight/height*width;
        }
        var margin_top  = (parentHeight - newHeight) / 2;
        var margin_left = (parentWidth  - newWidth ) / 2;

        $(this).css({'margin-top' :margin_top  + 'px',
                     'margin-left':margin_left + 'px',
                     'height'     :newHeight   + 'px',
                     'width'      :newWidth    + 'px'});
    });
};

基本的に、それは、次に、アスペクト比を維持しながら、親の背景のいずれも、表示されないようにフィットするように伸び、親以内にセンター要素をつかむ。

その後、再び、これはあなたが何をしたいのかではないかもしれません。

Answer 3

を使用 JQueryUIサイズ変更可能の

$("#some_image").resizable({ aspectRatio:true, maxHeight:300 });

アスペクト比：真 - >元の縦横比を維持する

Answer 4

ありません会計処理量のコピー pastersがえっ！たいという思いもありましたから、すべて見ましたが例のスケーリング幅または高さ..きたがらないその他のあふれる?!

• リサイズの幅と高さの必要がなく、ループ
• なを超える画像を元寸法
• 使用例を紹介する作品を正しくん。e幅/側面高さは、高さ-面幅で画像が実際にスケールを適切に上下:/

はしており十分に変換するにはjavascriptやその他の言語

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

private void ResizeImage(Image img, double maxWidth, double maxHeight)
{
    double srcWidth = img.Width;
    double srcHeight = img.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;
}

Answer 5

これは、あなたが、それは完璧な作物の比率を与える収穫後に完璧な高さと幅のアスペクト比が必要な場合は、良い解決策がある

getPerfectRatio(img,widthRatio,heightRatio){

  if(widthRatio < heightRatio){
    var height = img.scalingHeight - (img.scalingHeight % heightRatio);
    var finalHeight = height
    var finalWidth = widthRatio * (height/heightRatio);

    img.cropHeight = finalHeight;
    img.cropWidth = finalWidth
  }
  if(heightRatio < widthRatio){;
    var width = img.scalingWidth - (img.scalingWidth % widthRatio);
    var finalWidth = width;
    var finalHeight  = heightRatio * (width/widthRatio);
    img.cropHeight = finalHeight;
    img.cropWidth = finalWidth
  }

  return img
  
}