Facebook的正方形图片是什么尺寸？

Question

使用图形API，我可以获取小、大、中等大小的图片。或者我可以获得小正方形图片。

但是如何获取大正方形图片？是否有任何可用的服务呢？

- Sergey

Answer 1

简单，我刚刚发现这个。

例如，

https://graph.facebook.com/friends_Id/picture?width=200&height=200

完成~

- VHanded

---

不错，但实际上URL会给不同用户提供不可预测的结果尺寸。 当将其设置为128＆128时，它将在每个配置文件用户中显示相同的大小。 - Mark Vital

相关的Facebook API文档表示，如果宽度和高度相等，则会返回“一个正方形图像”。然而，在我自己对相册中的照片进行测试时，返回的宽度和高度都大于200，并且结果也不是正方形。我尝试在该文档页面上提交错误报告，但我收到了一个错误：“我们目前只接受英文错误报告”...即使我的报告是用英语写的。 - Mark Stosberg

对于大多数用户，您将获得一个正方形的图片，但对于某些用户，您可能会获得一个非正方形的图片，宽度与您请求的相同，但高度不同。实际上，如果您仔细查看文档，它并不保证您会获得一个正方形的图像。 - Clafou

Answer 2

奇怪的是，尽管Facebook在新的时间轴图片上显示了更大的正方形个人资料图片，但它本身并没有使用更大的正方形图片。如果你仔细看，他们会采用一个更大的长方形图像，并将其重新定位到HTML元素中，就像Michael上面提出的那样。

我希望在某个时候，他们用于此的定位数据将通过API发布，但我不知道这些数据是否已经可用。我也遇到过需要这样做的情况，迄今为止，我要么只是将图像居中，要么使用顶部部分。虽然FB已经允许并跟踪最重要的“正方形”图像的自定义定位，但这并不理想。

- Brad Dwyer

Answer 3

官方没有办法做到这一点，以下是一个愚蠢的方法。下面的代码将确保图像的宽度/高度不超过120像素。如果超过了，那么图像就会溢出到元素之外：

<div style="width: 120px; height: 120px; overflow: hidden; display: inline-block;">
    <img src="{$image}" align="absmiddle" width=120 style="min-width: 120px; min-height: 120px;" />
</div>

- Michael Deal

---

该解决方案无法保持图像的原始长宽比。 - jhoff

Answer 4

你可以使用type参数指定所需的图片大小，它应该是以下三种之一：square（50x50）、small（50像素宽，高度可变）和large（大约200像素宽，高度可变）。这些是唯一可用的三种尺寸。你可以使用更大的50x50图像版本，但显然会出现抖动效果。

来自Graph API参考。

- Jimmy Sawczuk

---

谢谢，吉米。但是如果我需要例如180px/180px的个人资料图片怎么办？ - Sergey

就像我说的那样，这些是你的选择。要使其变成180x180，唯一的方法就是自己裁剪大图像，或者使用直接的HTML属性放大50x50的图像。 - Jimmy Sawczuk

+1，@Sergey 长话短说...Facebook 不会替你做作业！ :-) - ifaour

Answer 5

现在，Graph实际上可以返回任何大小的正方形图像。它们缓存最常见的大小（如100x100，128x128），并通过以下请求返回最接近的大小：（将鼠标悬停查看）

- Mikhail Larionov

Answer 6

正如其他回答已经说明的那样，在Facebook中，方形图片仅具有50x50分辨率。

但是，一种简单的CSS hack可以解决这个问题：

查询大图像，将img标签包装在一个div中，并将此CSS应用于该div：

img#facebook_img {
 width: YOUR_WIDTH;
}
div#wrapper {
 height: YOUR_HEIGHT;  
 overflow: hidden;  
}

如果YOUR_WIDTH和YOUR_HEIGHT相同，您将获得一个正方形的图像，并保留比例。

- Andre Schweighofer

Answer 7

对我来说，没有一个答案完全适合我，因为我遇到了各种尺寸的个人资料图片（一些比预期的高度更高，一些比预期的高度更低），结果要么被拉伸，要么不居中。

最终，我使用了一个 div 元素而不是 img，并通过 background-image style 属性设置图像，而不是通过其 src 属性。

CSS 文件：

.profile-pic {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 120px;
    width: 120px;
    border: solid 1px #ddd;
}

HTML：

 <div style="background-image:url(https://graph.facebook.com/123/picture?width=120&height=120);" class="profile-pic"></div>

将上述内容中的120px（在CSS中出现两次，在HTML片段中也出现两次）替换为您所需的尺寸。

- Clafou

---

注意：目前在请求100x100像素的图像时，Facebook会提供一个始终为正方形的图像。但是，如果以不同的大小请求相同的图像，例如120x120像素，则可能会得到一个非正方形的图像，宽度为120像素但高度不同。 - Clafou