方形 Facebook 图片

Question

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

但是怎样才能得到大的正方形图片呢？有什么服务我可以使用吗？

Answer 1

很简单，我刚刚发现这个。

例如，

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

~

Answer 2

奇怪的是，Facebook 本身并没有使用更大的方形图像，尽管他们在新的时间轴图片上显示了更大的方形个人资料图片。如果您仔细观察，他们会采用更大的矩形图像并将其重新定位在 HTML 元素内，如 Michael 上面建议的那样。

我预计在某个时候他们使用的定位数据将通过 API 发布，但我不知道该数据是否可用。我曾经有过这样的经历，这也会很有帮助，到目前为止，要么只是将图像居中，要么使用顶部部分。但这并不理想，因为 FB 已经允许通过其“图标”创建者来允许并跟踪图像中最重要的“方块”的自定义定位。

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>

Answer 4

您可以使用 type 参数指定所需的图片尺寸，该尺寸应为正方形 (50x50)、小（50 像素宽，可变高度）和大（约 200 像素宽，可变高度）之一。

来自图形 API 参考。这是仅有的三种尺寸。您可以使用更大版本的 50x50 图像，但它显然会看起来抖动。

Answer 5

如今，Graph 实际上可以返回任何大小的方形图像。它们缓存最常见的尺寸（例如 100x100、128x128），并通过以下 请求（悬停查看）

Answer 6

正如其他答案已经指出的那样，在 facebook 中，方形图片仅具有 50x50 分辨率。

一个简单的 CSS hack 就可以解决这个问题：

查询大图像，用 div 包装 img-标签，并将此 CSS 应用于 div：

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

If YOUR_WIDTH< /code> 和 YOUR_HEIGHT 与您获得的方形图像相同，并且比例被保留。

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 片段中出现两次）替换为您想要的尺寸。