Question

我正在使用JavaScript和Facebook Graph API将随机配置文件图像提取到我正在处理的网站上，如下所示：

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

然而，我收到的一些照片非常高。我需要通过裁剪来调节高度，以便移除超过350像素的图像。拉出的图像存放在DIV中，如下所示：

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

我尝试过给DIV一个最大高度的CSS，但这似乎不起作用。然后我尝试了CSS“剪辑”功能：

#right-guy {

保证金：0; 填充：50px 30px; 位置：绝对; 片段：矩形（20像素，20像素，20像素，20像素）; 溢出：隐藏; }

但据我所知，剪辑仅适用于图像，而不是整个DIV，因为没有任何事情发生。是否有一种方法让我在CSS中引用图像，尽管图像不是静态的并且是随机拉动的，或者b）一旦其内容超过最大高度就裁剪DIV？

Answer 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;
    // ...
}

Answer 2

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

Answer 3

您实际上不需要裁剪自己的图像，脸书可以裁剪您想要的尺寸图像。

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

使用此 - var image_src“http://graph.facebook.com/”+ newId +“/ picture？width =”+ width +“＆amp; height =”+ height

Answer 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>

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

4 个答案: