使用图形API,我可以获取小、大、中等大小的图片。或者我可以获得小正方形图片。
但是如何获取大正方形图片?是否有任何可用的服务呢?
使用图形API,我可以获取小、大、中等大小的图片。或者我可以获得小正方形图片。
但是如何获取大正方形图片?是否有任何可用的服务呢?
官方没有办法做到这一点,以下是一个愚蠢的方法。下面的代码将确保图像的宽度/高度不超过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>
现在,Graph实际上可以返回任何大小的正方形图像。它们缓存最常见的大小(如100x100,128x128),并通过以下请求返回最接近的大小:(将鼠标悬停查看)
正如其他回答已经说明的那样,在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
相同,您将获得一个正方形的图像,并保留比例。对我来说,没有一个答案完全适合我,因为我遇到了各种尺寸的个人资料图片(一些比预期的高度更高,一些比预期的高度更低),结果要么被拉伸,要么不居中。
最终,我使用了一个 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>