关于javascript：如何按比例调整图像大小/保持纵横比？


How to resize images proportionally / keeping the aspect ratio?

我有一些在尺寸上相当大的图像，我想用jquery缩小它们，同时保持比例的限制，即相同的纵横比。

有人能给我指一些代码，或者解释一下逻辑吗？

相关讨论

我认为这是一个非常酷的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 /**
  * Conserve aspect ratio of the original region. Useful when shrinking/enlarging
  * images to fit into a certain area.
  *
  * @param {Number} srcWidth width of source image
  * @param {Number} srcHeight height of source image
  * @param {Number} maxWidth maximum available width
  * @param {Number} maxHeight maximum available height
  * @return {Object} { width, height }
  */
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
 }

。

相关讨论

从http://ericjuden.com/2009/07/jquery-image-resize查看这段代码/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(document).ready(function() {
    $('.story-small img').each(function() {
        var maxWidth = 100; // Max width for the image
        var maxHeight = 100;    // Max height for the image
        var ratio = 0;  // Used for aspect ratio
        var width = $(this).width();    // Current image width
        var height = $(this).height();  // Current image height

        // Check if the current width is larger than the max
        if(width > maxWidth){
            ratio = maxWidth / width;   // get ratio for scaling image
            $(this).css("width", maxWidth); // Set new width
            $(this).css("height", height * ratio);  // Scale height based on ratio
            height = height * ratio;    // Reset height to match scaled image
            width = width * ratio;    // Reset width to match scaled image
        }

        // Check if current height is larger than max
        if(height > maxHeight){
            ratio = maxHeight / height; // get ratio for scaling image
            $(this).css("height", maxHeight);   // Set new height
            $(this).css("width", width * ratio);    // Scale width based on ratio
            width = width * ratio;    // Reset width to match scaled image
            height = height * ratio;    // Reset height to match scaled image
        }
    });
});
相关讨论

如果我正确理解了这个问题，您甚至不需要jquery。在客户机上按比例缩小图像可以单独使用css：只需将其max-width和max-height设置为100%。

1
2
3
<img src="http://www.getdigital.de/images/produkte/t4/t4_css_sucks2.jpg"
    style="max-height: 100%; max-width: 100%">
?

。

这是小提琴：http://jsfiddle.net/9eq5c/

相关讨论

为了确定纵横比，需要有一个要瞄准的比率。

Height。

1
2
3
4
function getHeight(length, ratio) {
  var height = ((length)/(Math.sqrt((Math.pow(ratio, 2)+1))));
  return Math.round(height);
}

。

氧化镁

1
2
3
4
function getWidth(length, ratio) {
  var width = ((length)/(Math.sqrt((1)/(Math.pow(ratio, 2)+1))));
  return Math.round(width);
}

号

在这个例子中，我使用16:10，因为这是典型的监视器纵横比。

1
2
3
4
5
6
var ratio = (16/10);
var height = getHeight(300,ratio);
var width = getWidth(height,ratio);

console.log(height);
console.log(width);

号

以上结果为147和300。

相关讨论

事实上，我刚碰到这个问题，我发现的解决方案非常简单和奇怪

1
$("#someimage").css({height:<some new height>})

奇迹般的是，图像被调整到新的高度，保持相同的比例！

相关讨论

有帮助吗？

浏览器将注意保持纵横比不变。

即当图像宽度大于高度时，max-width开始，其高度将按比例计算。同样，当高度大于宽度时，max-height也会生效。

您不需要任何jquery或javascript。

支持IE7+和其他浏览器(http://canius.com/minmaxwh)。

相关讨论

这个问题有4个参数

  • 当前图像宽度ix
  • 当前图像高度Iy
  • 目标视区宽度cx
  • 目标视区高度cy

    • 有3个不同的条件参数

  • cx>cy？
  • ix>cx？
  • Y>Y？

    • 解决方案

  • 找到目标视图端口F的较小一侧
  • 查找当前视图端口L的较大一侧
  • 找出F/L=系数的系数
  • 将当前端口的两侧乘以系数ie，fx=ix*系数；fy=iy*系数

    • 这就是你要做的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    //Pseudo code


    iX;//current width of image in the client
    iY;//current height of image in the client
    cX;//configured width
    cY;//configured height
    fX;//final width
    fY;//final height

    1. check if iX,iY,cX,cY values are >0 and all values are not empty or not junk

    2. lE = iX > iY ? iX: iY; //long edge

    3. if ( cX < cY )
       then
    4.      factor = cX/lE;    
       else
    5.      factor = cY/lE;

    6. fX = iX * factor ; fY = iY * factor ;

    。

    这是一个成熟的论坛，我没有给你代码：)

    相关讨论

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    $('#productThumb img').each(function() {
        var maxWidth = 140; // Max width for the image
        var maxHeight = 140;    // Max height for the image
        var ratio = 0;  // Used for aspect ratio
        var width = $(this).width();    // Current image width
        var height = $(this).height();  // Current image height
        // Check if the current width is larger than the max
        if(width > height){
            height = ( height / width ) * maxHeight;

        } else if(height > width){
            maxWidth = (width/height)* maxWidth;
        }
        $(this).css("width", maxWidth); // Set new width
        $(this).css("height", maxHeight);  // Scale height based on ratio
    });
    相关讨论

    这应该适用于所有可能比例的图像。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    $(document).ready(function() {
        $('.list img').each(function() {
            var maxWidth = 100;
            var maxHeight = 100;
            var width = $(this).width();
            var height = $(this).height();
            var ratioW = maxWidth / width;  // Width ratio
            var ratioH = maxHeight / height;  // Height ratio

            // If height ratio is bigger then we need to scale height
            if(ratioH > ratioW){
                $(this).css("width", maxWidth);
                $(this).css("height", height * ratioW);  // Scale height according to width ratio
            }
            else{ // otherwise we scale width
                $(this).css("height", maxHeight);
                $(this).css("width", height * ratioH);  // according to height ratio
            }
        });
    });

    号

    如果图像是成比例的，那么此代码将用图像填充包装器。如果图像不成比例，则会裁剪额外的宽度/高度。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
        <script type="text/javascript">
            $(function(){
                $('#slider img').each(function(){
                    var ReqWidth = 1000; // Max width for the image
                    var ReqHeight = 300; // Max height for the image
                    var width = $(this).width(); // Current image width
                    var height = $(this).height(); // Current image height
                    // Check if the current width is larger than the max
                    if (width > height && height < ReqHeight) {

                        $(this).css("min-height", ReqHeight); // Set new height
                    }
                    else
                        if (width > height && width < ReqWidth) {

                            $(this).css("min-width", ReqWidth); // Set new width
                        }
                        else
                            if (width > height && width > ReqWidth) {

                                $(this).css("max-width", ReqWidth); // Set new width
                            }
                            else
                                (height > width && width < ReqWidth)
                    {

                        $(this).css("min-width", ReqWidth); // Set new width
                    }
                });
            });

    号

    没有额外的温度变量或支架。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
        var width= $(this).width(), height= $(this).height()
          , maxWidth=100, maxHeight= 100;

        if(width > maxWidth){
          height = Math.floor( maxWidth * height / width );
          width = maxWidth
          }
        if(height > maxHeight){
          width = Math.floor( maxHeight * width / height );
          height = maxHeight;
          }

    。

    记住：搜索引擎不喜欢它，如果宽度和高度属性不适合图像，但他们不知道JS。

    经过反复试验，我得出了这个解决方案：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function center(img) {
        var div = img.parentNode;
        var divW = parseInt(div.style.width);
        var divH = parseInt(div.style.height);
        var srcW = img.width;
        var srcH = img.height;
        var ratio = Math.min(divW/srcW, divH/srcH);
        var newW = img.width * ratio;
        var newH = img.height * ratio;
        img.style.width  = newW +"px";
        img.style.height = newH +"px";
        img.style.marginTop = (divH-newH)/2 +"px";
        img.style.marginLeft = (divW-newW)/2 +"px";
    }

    使用CSS可以实现大小调整(保持纵横比)。这是一个更简单的答案，灵感来自丹·达斯卡莱斯库的帖子。

    http://jsbin.com/viqare

    1
    2
    3
    4
    img{
         max-width:200px;
     /*Or define max-height*/
      }

    号

    1
    2
    3
    <img src="http://e1.365dm.com/13/07/4-3/20/alastair-cook-ashes-profile_2967773.jpg"  alt="Alastair Cook" />

    <img src="http://e1.365dm.com/13/07/4-3/20/usman-khawaja-australia-profile_2974601.jpg" alt="Usman Khawaja"/>

    号

    这是对Mehdiway答案的修正。未将新的宽度和/或高度设置为最大值。一个好的测试用例如下(1768 x 1075像素)：http://spacecoastsports.com/wp-content/uploads/2014/06/sportballs1.png。(由于缺乏信誉点，我无法在上面对此发表评论。)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
      // Make sure image doesn't exceed 100x100 pixels
      // note: takes jQuery img object not HTML: so width is a function
      // not a property.
      function resize_image (image) {
          var maxWidth = 100;           // Max width for the image
          var maxHeight = 100;          // Max height for the image
          var ratio = 0;                // Used for aspect ratio

          // Get current dimensions
          var width = image.width()
          var height = image.height();
          console.log("dimensions:" + width +"x" + height);

          // If the current width is larger than the max, scale height
          // to ratio of max width to current and then set width to max.
          if (width > maxWidth) {
              console.log("Shrinking width (and scaling height)")
              ratio = maxWidth / width;
              height = height * ratio;
              width = maxWidth;
              image.css("width", width);
              image.css("height", height);
              console.log("new dimensions:" + width +"x" + height);
          }

          // If the current height is larger than the max, scale width
          // to ratio of max height to current and then set height to max.
          if (height > maxHeight) {
              console.log("Shrinking height (and scaling width)")
              ratio = maxHeight / height;
              width = width * ratio;
              height = maxHeight;
              image.css("width", width);
              image.css("height", height);
              console.log("new dimensions:" + width +"x" + height);
          }
      }

    号

    2个步骤：

    步骤1)计算图像的原始宽度/原始高度之比。

    步骤2)将原始宽度/原始高度比乘以新的所需高度，得到新高度对应的新宽度。

    看看这件作品…

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    /**
     * @param {Number} width
     * @param {Number} height
     * @param {Number} destWidth
     * @param {Number} destHeight
     *
     * @return {width: Number, height:Number}
     */
    function resizeKeepingRatio(width, height, destWidth, destHeight)
    {
        if (!width || !height || width <= 0 || height <= 0)
        {
            throw"Params error";
        }
        var ratioW = width / destWidth;
        var ratioH = height / destHeight;
        if (ratioW <= 1 && ratioH <= 1)
        {
            var ratio = 1 / ((ratioW > ratioH) ? ratioW : ratioH);
            width *= ratio;
            height *= ratio;
        }
        else if (ratioW > 1 && ratioH <= 1)
        {
            var ratio = 1 / ratioW;
            width *= ratio;
            height *= ratio;
        }
        else if (ratioW <= 1 && ratioH > 1)
        {
            var ratio = 1 / ratioH;
            width *= ratio;
            height *= ratio;
        }
        else if (ratioW >= 1 && ratioH >= 1)
        {
            var ratio = 1 / ((ratioW > ratioH) ? ratioW : ratioH);
            width *= ratio;
            height *= ratio;
        }
        return {
            width : width,
            height : height
        };
    }

    号

    这对我来说完全适用于一个可拖动的项目-电子：真的

    1
    2
    3
    4
    5
    .appendTo(divwrapper).resizable({
        aspectRatio: true,
        handles: 'se',
        stop: resizestop
    })