我有一堆正在解析的图像,可以访问它们的url,高度和宽度。
我想将这些图像放置在具有三个设置了高度和宽度的不同对象的照片网格中。我试图提出一种很好的方法,根据其尺寸将每个图像放置在每个“类”的项目中,并且最适合哪个图像,以使其不会拉伸(stretch)。
例如:
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.
}
我想发布这个问题,看看在发现高度,宽度之间的平均差并将其与最近的“垃圾箱”或其他东西进行比较之前,是否有内置的魔术可以帮助我解决这里的问题。
最佳答案
在我以为您给我的答案有所不同之后,您会从技术上实现您的期望:
将300x500的图像压缩到250x500的空间真的可以接受吗?仍然会有失真。
理想的答案是重组数据,以在图像尺寸比例上施加一些约束,无论是在将图像插入系统中还是运行某些图像处理以将图像裁剪为正确的比例。请注意,background-size: cover;
在这里可能会有所帮助,并将图像放置在背景中(background-size
仅适用于background
图像,而不适用于<img />
元素)。将大小限制为所需的确切大小甚至比限制分辨率更好。
理想情况下,您可能希望更改表示层以与数据一起使用(可以任意调整大小),但是,如果这不是一种选择,则必须尝试操作数据以匹配您要呈现的方式。拉伸(stretch)或挤压的图像永远不会看起来很好。