javascript - 具有相同大小的图像的 Javascript 图像面板

Question

将不同大小的图像面板显示为相同大小的最佳方法是什么。是否有一个简单的 Javascript 框架可以处理调整大小和可能的一些裁剪。

例如，如果您查看 Pinterest，您会发现所有图像都有不同的大小（我们可以使用 jQuery masonry）。但是当您查看此页面时，http ://pinterest.com/pin/97249673174024268/所有图像的大小都相同。

首先是我的问题是明智的，其次是有一种方法可以使用 Javascript 库来实现这一点。

Answer 1

这里的这个插件可以处理不同的图像大小并按照你的意愿排列它们。

Answer 2

如果您想完全在 JavaScript 中完成此操作，那么您不需要库就足够简单了。如果你有 jQuery，它会更容易。

1. 将图像放在 a<div>中，宽度和高度设置为所需大小，“溢出”设置为“隐藏”，“位置”为“绝对”或“相对”。

2. 获取图片大小：

   var imageWidth = $(image).width(),
       imageHeight = $(image).height();
   

   （如果它被加载到 JavaScript Image 对象中，您也可以从image.width和获取它image.height）

3. 做一些数学计算可以缩小或放大多少：

   var widthScale = divWidth/imageWidth, 
       heightScale = divHeight/imageHeight,
       scale = Math.max(widthScale, heightScale),
       newWidth = Math.round(imageWidth*scale),
       newHeight = Math.round(imageHeight*scale);
   

   本质上，这计算出需要缩放图像以使宽度适合并使高度适合，然后选择两者中较大的一个，以便图像适合一侧并溢出另一侧。

4. 为图像设置样式以适应新大小并将其居中在 div 内：

   $(image).css({
       width: newWidth+'px', 
       height: newHeight+'px', 
       position: 'absolute',
       left: '50%', 
       top: '50%', 
       margin-left: 0-Math.round(newWidth/2)+'px',
       margin-top:  0-Math.round(newHeight/2)+'px'
   });
   

应该这样做！