Question

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

例如，如果你看Pinterest，你会发现所有的图像都有可变的大小（我们可以使用jQuery砌体）。但是当你看到这个页面时，http://pinterest.com/pin/97249673174024268/所有图像都是相同的大小。

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

Answer 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'
});

应该这样做！

Answer 2

此插件here可以处理不同的图像尺寸，并按照您的需要进行排列。

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

2 个答案: