如何裁剪从 Facebook API 提取的图像以显示在网站上？答案

【问题标题】：How do I crop an image pulled from the Facebook API for display on a website?如何裁剪从 Facebook API 提取的图像以显示在网站上？
【发布时间】：2011-01-17 06:24:41
【问题描述】：

我正在使用 JavaScript 和 Facebook Graph API 将随机的个人资料图片提取到我正在开发的网站，如下所示：

var image_src = "http://graph.facebook.com/"+newId+"/picture?type=large"

但是，我收到的一些图片非常高。我需要通过裁剪来调节高度，以便删除超过 350 像素的图像。被拉取的图像被放置在一个 DIV 中，如下所示：

<div id = "right-guy"></div>

我尝试在 CSS 中为 DIV 指定最大高度，但这似乎不起作用。然后我尝试了 CSS“剪辑”功能：

#right-guy {

边距：0；填充：50px 30px；位置：绝对；剪辑：矩形（20px，20px，20px，20px）；溢出：隐藏； }

但据我所知，clip 仅适用于图像，而不适用于整个 DIV，因为什么都没有发生。有没有一种方法可以让我在 CSS 中引用图像，尽管图像不是静态的并且是随机拉出的，或者 b) 一旦 DIV 的内容超过最大高度就裁剪 DIV？

【问题讨论】：

标签： css image facebook facebook-graph-api crop

【解决方案1】：

您也可以通过使用图像源作为背景图像来解决此问题，例如链接或 div 而不是真实的图像标签。像这样的：

<a class="user-image" href="link/to/users/profile" style="background-image:http://graph.facebook.com/"+newId+"/picture?type=large" title="Visit XY's profile">User name</a>

a.user-image {
    background: transparent no-repeat top left;
    display: block;
    text-indent: -999em;
    width: 350px;
    height: 350px;
    // ...
}

【讨论】：

【解决方案2】：

您可以强制 div 的高度，然后在该 div 的 CSS 中使用 overflow:hidden。任何大到足以扩展 div 的子元素都将被它所掩盖。

【讨论】：

【解决方案3】：

您实际上不需要自己裁剪图像，Face book 可以按照您想要的尺寸裁剪图像。

而不是使用 - var image_src = "http://graph.facebook.com/"+newId+"/picture?type=large"

使用这个 - var image_src "http://graph.facebook.com/"+newId+"/picture?width="+width+"&height="+height

【讨论】：

【解决方案4】：

检查此解决方案：http://ajaxray.com/blog/rounded-thumb-image-with-css-3
还有演示：http://ajaxray.com/Examples/cropped-thumb.html

这只是两个简单的步骤。

首先，在您的 css 中，为将保存您的图像的链接/跨度添加一个类。

<style type="text/css">
a.user-image {
    background: transparent no-repeat top left;
    display: block;
    text-indent: -999em;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    box-shadow: 0px 0px 3px #666;
}
</style>

在 HTML 中，使用您的图片作为该元素的背景图片。

<a class="user-image" href="http://www.facebook.com/ajaxray" style="background-image: url(http://graph.facebook.com/667896332/picture)" title="Visit Anis's profile">Anis Ahmad</a>

【讨论】：

您好@laalto，我已为此解决方案添加了代码示例。感谢您的建议。