按比例缩放图像而不知道尺寸 [英] scaling an image proportionally without knowing dimensions

问题描述

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

我将它们显示在我的页面上，我将每个的高度减小到55像素。但是，非常宽的图像（横幅等）正在全宽显示。

我不能限制宽度和高度，因为我会扭曲图像。有谁知道一个创造性的解决方案，将按比例缩放这些图像，使其不超过55px（h）和75px（w）？

p.s。我试过在php中的getimagessize（），但函数太长了，完成

谢谢！

解决方案

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

  var maxWidth = 75; //图片的最大宽度
 var maxHeight = 77; //图片的最大高度
 var ratio = 0; //用于宽高比
 var width = $（this）.width（）; //当前图像宽度
 var height = $（this）.height（）; //当前图像高度
 
 //检查当前宽度是否大于max 
 if（width> maxWidth）{
 ratio = maxWidth / width; // get ratio for scaling image 
 $（this）.css（width，maxWidth）; // Set new width 
 $（this）.css（height，height * ratio）; //根据比例缩放高度
 height = height * ratio; //重置高度以匹配缩放的图像
 width = width * ratio; //重置宽度以匹配缩放的图像
} 
 
 //检查当前高度是否大于max 
 if（height> maxHeight）{
 ratio = maxHeight / height; // get ratio for scaling image 
 $（this）.css（height，maxHeight）; // Set new height 
 $（this）.css（width，width * ratio）; //根据比例缩放宽度
 width = width * ratio; //重置宽度以匹配缩放的图像
} 
  

希望这有任何帮助。 / p>

Bah我刚刚意识到我的大脑放屁，未知的图像大小。忽略整个事情

I have a script the retrieves remote images from various URLs. The width and height are unknown variables.

I have them displaying on my page and I'm reducing the height to 55px for each. However, the images that are very wide (banners, etc.) are displaying at their full width.

I can't constrain the width and height because I'll distort the image. Does anyone know a creative solution that will proportionally scale these images so they don't exceed 55px(h) AND 75px(w)?

p.s. I've tried getimagessize() in php, but the functions takes way too long to complete

Thanks!

解决方案

I had a similar problem but I was using jQuery. But I think you can use the same logic in php to calculate the image size.

    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
    }

Hope this is of any help.

Bah I just realized I brain farted, unknown image size. Disregard the whole thing

这篇关于按比例缩放图像而不知道尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！