13

我如何将 jQuery 中的图像调整为一致的纵横比。例如设置最大高度并正确调整宽度。谢谢。

4

5 回答 5

19

这是一个有用的功能，可能会做你想做的事：

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'});
    });
};

基本上，它抓取一个元素，在父元素中居中，然后将其拉伸以适应父元素的背景不可见，同时保持纵横比。

再说一次，这可能不是您想要做的。

于 2009-11-05T18:50:31.717 回答
14

你可以手动计算，

IE：

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));
}
于 2009-11-05T18:20:20.243 回答
7

使用JQueryUI 可调整大小 

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

aspectRatio: true -> 保持原始纵横比

于 2009-11-05T18:34:08.623 回答
1

那里没有计算复制和粘贴的数量，嗯！我也想知道这一点，我看到的只是缩放宽度或高度的无穷无尽的例子......谁想要另一个溢出？！

  • 无需循环即可调整宽度和高度
  • 不超过图片原始尺寸
  • 使用正常工作的数学，即高度的宽度/方面，宽度的高度*方面，因此图像实际上可以正确地上下缩放：/

应该足够直截了当，可以转换为 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;
}
于 2011-04-13T19:51:21.547 回答
0

如果您在裁剪后需要完美的高度和宽度纵横比，这是一个很好的解决方案，它将提供完美的裁剪比例

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
  
}

于 2018-03-27T11:13:09.793 回答