0

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

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

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

4

2 回答 2

1

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

于 2012-09-08T15:10:34.690 回答
1

如果您想完全在 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'
});

应该这样做！

于 2012-09-08T03:49:11.440 回答