Question

我有一个脚本，可以从各种URL中检索远程图像。宽度和高度是未知变量。

我将它们显示在我的页面上，我将每个高度降低到55px。但是，非常宽的图像（横幅等）以其全宽显示。

我不能约束宽度和高度，因为我会扭曲图像。有没有人知道一个创造性的解决方案，将按比例缩放这些图像，使它们不超过55px（h）和75px（W）？

P.S。我在php中尝试了getimagessize（），但这些函数需要很长时间才能完成

谢谢！

Answer 1

我有类似的问题，但我使用的是jQuery。但我认为你可以在php中使用相同的逻辑来计算图像大小。

    var maxWidth = 75; // Max width for the image
    var maxHeight = 77;    // 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
    }

希望这有任何帮助。

Bah我刚刚意识到我的大脑放屁，图像尺寸未知。无视整件事

Answer 2

嘿，你总是可以用css来做到这一点！喜欢这个answer explains，但你可以避免支持ie6和ie7这个功能（在这个场景中你可以使用条件注释来调整javascript或serverside php脚本）

顺便说一句，上面的答案确实有效！但你应该以编程方式添加img并直接从对象中获取图像的高度和宽度，然后运行上面的resize函数：

   var rimg = new Image();
   rimg.src = "yourimageserverurl";
   var original_height = rimg.height;
   var original_width = rimg.width;
   start the resize function on rimg..

在不知道尺寸的情况下按比例缩放图像

2 个答案: