Question

我有一堆我正在解析的图片，我可以访问他们的网址，高度和宽度。

我想将这些图像放在具有三个不同设置高度和宽度对象的照片网格中。我试图想出一个很好的方法，根据它的尺寸将每个图像放在每个“类”的项目中，以及哪个“最适合”的图像，因此它不会被拉伸。

例如：

   var imageSource = //source of image;
   var imageHeight = //height of image;
   var imageWidth = //width of image;
   var imageClass = bestClass(imageHeight, imageWidth);

   function bestClass(height, width){
        var classes = ["250,500", "500,500", "300,400"];

        //do some magic to determine which class is the best dimensions for this image in a photo grid. 
   }

我想发布这个问题，看看是否有任何魔法内置帮助我在这里找到高度，宽度之间的平均差异，并将其与最近的“bin”或其他......进行比较...... / p>

Answer 1

正如你所得到的答案在技术上实现了你的想法之后，我认为我会以不同的方式给你：

将300x500的图像压缩到250x500的空间真的可以接受吗？仍然会有扭曲。

理想的答案是重新构建数据以对图像尺寸比率施加一些限制，无论是将图像插入系统还是运行某些图像处理以将图像裁剪为正确的比例。请注意，background-size: cover;可能会对此有所帮助，并将图片置于背景中（background-size仅适用于background图片，而不适用于<img />元素。比约束分辨率更好的是将尺寸限制在你想要的确切尺寸。

理想情况下，您可能希望更改您的表示层以使用您的数据（任意大小），但是，如果这不是一个选项，您必须尝试操纵您的数据以符合您的需要展示。拉伸或挤压的图像永远不会好看。

Answer 2

您可以尝试使用比率高度/宽度。

 var ratio = (imageHeight/imageWidth);
 if ( Math.abs(ratio - 250/500) <= Math.abs(ratio - 500/500) && Math.abs(ratio - 250/500) <= Math.abs(ratio - 300/400){
console.log("best is 250/500")
}
else if ( Math.abs(ratio - 500/500) <= Math.abs(ratio - 250/500) && Math.abs(ratio - 500/500) <= Math.abs(ratio - 300/400){
console.log("best is 500/500")
}
else{console.log("best is 300/400")}

更新：如果你不想成为任何扭曲，只是找到适合这些类中图像的完美尺寸，请使用图像比例和类比率之间的差异，如下所示：

var ratio = (imageHeight/imageWidth);
if ( Math.abs(ratio - 250/500) <= Math.abs(ratio - 500/500) && Math.abs(ratio - 250/500) <= Math.abs(ratio - 300/400){
    var dif = ratio-0.5;
    if(dif<=0){
       var newImageWidth = 500;
       var newImageHeight = 500*ratio
    }
    else{
       var newImageWidth = 500 - (500*dif);
       var newImageHeight = 250;
    }
}
else if ( Math.abs(ratio - 500/500) <= Math.abs(ratio - 250/500) && Math.abs(ratio - 500/500) <= Math.abs(ratio - 300/400){
console.log("best is 500/500");
    var dif = ratio-1;
    if(dif<=0){
       var newImageWidth = 500;
       var newImageHeight = 500*ratio
    }
    else{
       var newImageWidth = 500 - (500*dif);
       var newImageHeight = 500;
    }
}
else{console.log("best is 300/400")
    var dif = ratio-0.75;
    if(dif<=0){
       var newImageWidth = 400;
       var newImageHeight = 400*ratio
    }
    else{
       var newImageWidth = 400 - (400*dif);
       var newImageHeight = 300;
    }
}

Answer 3

使用高度/宽度比：

var func = function bestClass(height, width){
    var classes = [{ Width: 250, Height: 500} , { Width: 500, Height: 500}, { Width: 300, Height: 400}];
    var minDist = 1;
    var ratio = height / width;
    var index = 0;
    for(var i = 0; i < 3; i++) {
        var dist = Math.abs((classes[i].Height / classes[i].Width) - ratio);
        if (dist < minDist) {
            minDist = dist;
            index = i;
        }
    }
    return classes[index];
}
var result = func(100,100);

算法 - 根据图像尺寸的高度和宽度确定尺寸的最佳方法？

3 个答案: