朋友图片尺寸答案

【问题标题】：Friends pictures with size朋友图片尺寸
【发布时间】：2012-03-05 17:48:07
【问题描述】：

我基本上需要重新创建这个页面：http://www.facebook.com/me/friends

但是：因为并非所有图像都是实际的正方形，所以我需要获取它们的尺寸以便使用 css 和隐藏溢出来裁剪它们（就像 facebook 基本上一样）。我知道有一种方法可以检索方形图像，但它们的大小为 50 像素 x 50 像素（我想要大的）。

我认为 FQL 可以实现这一点，也许它可以从以下内容开始：

fql?q=SELECT name, pic_big FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = me())

【问题讨论】：

标签： facebook image facebook-fql image-size

【解决方案1】：

您可以从 javascript 获取图像尺寸，然后将它们强制定位为固定高度/宽度 div 中的背景图像。您可以在图像加载后通过 javascript 获取高度和宽度。

IMG 加载见：http://www.w3schools.com/jsref/event_img_onload.asp

这就是你所做的

<img onload="redoImage(this)" src="<%=user["pic_big"]%>" id="pic1">

或通过js

var img=new Image();
img.onload = redoImage();
img.src="<%=user["pic_big"]%>";

那么这是图像显示的真实位置，您将使用适当的偏移设置它的背景图像，以使图像正确显示。需要一些数学来计算如何获得偏移量 x 或偏移量 y。

<div id="pic1-holder" style="width:120px; height:120px;">&nbsp;</div>

function redoImage(this) {
  var xOffset = computeXoffset(this.width, 120);
  var yOffset = computeYoffset(this.height, 120);
  // now set the background image of the div
  // and the offset of that background image
};

我的生产代码可以很好地做到这一点。编码愉快。

【讨论】：