Javascript 图像面板，图像大小相同

Question

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

例如，如果您查看 Pinterest，您会发现所有图像都有可变大小(我们可以使用 jQuery masonry 来实现此目的)。但是当你查看这个页面时，http://pinterest.com/pin/97249673174024268/所有图像的尺寸相同。

首先我的问题是否合理，其次有没有一种方法可以通过 Javascript 库来实现这一点。

Answer 1

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

1. 将图像放入 <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'
   });
   

应该可以了!