具有相同大小的图像的 Javascript 图像面板答案

【问题标题】：Javascript image panel with images the same size具有相同大小的图像的 Javascript 图像面板
【发布时间】：2012-09-08 23:10:34
【问题描述】：

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

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

首先，我的问题是明智的，其次，我们是否可以通过 Javascript 库来实现这一点。

【问题讨论】：

标签： javascript image

【解决方案1】：

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

将图像放在<div> 中，宽度和高度设置为您想要的大小，“溢出”设置为“隐藏”，“位置”为“绝对”或“相对”。
获取图片大小：
```
var imageWidth = $(image).width(),
    imageHeight = $(image).height();
```
（如果加载到 JavaScript Image 对象中，也可以从image.width 和image.height 获取）
做一些数学计算可以缩小或放大多少：
```
var widthScale = divWidth/imageWidth, 
    heightScale = divHeight/imageHeight,
    scale = Math.max(widthScale, heightScale),
    newWidth = Math.round(imageWidth*scale),
    newHeight = Math.round(imageHeight*scale);
```
基本上，这会计算出需要缩放图像多少才能使宽度适合和高度适合，然后选择两者中较大的一个，使图像适合一侧并溢出另一侧。

为图像设置样式以适应新大小并将其居中放置在 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'
});

应该这样做！

【讨论】：

谢谢理查德会试试这个:)

【解决方案2】：

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

【讨论】：