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

Question

我正在使用 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 {

margin :0； 填充:50px 30px； position:absolute； 剪辑:矩形(20 像素、20 像素、20 像素、20 像素)； 溢出: Conceal ；

但据我所知，clip 仅适用于图像，而不适用于整个 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;
    // ...
}