Блог

Используя Graph API, я могу получать маленькие, большие и средние картинки. Или я могу получить маленькую квадратную картинку.

Но как я могу получить большую квадратную картинку? Есть ли какой-либо сервис, которым я могу воспользоваться?

Просто, я только что узнал об этом.

Пример,

https://graph.facebook.com/friends_Id/picture ?ширина = 200 и высота = 200

tada~

Как ни странно, Facebook сам по себе не использует увеличенное квадратное изображение, хотя на новых изображениях timeline они отображают изображение профиля большего размера в квадрате. Если присмотреться, они берут прямоугольное изображение большего размера и перемещают его внутри HTML-элемента, как предложил Майкл выше.

Я ожидал бы, что в какой-то момент данные о местоположении, которые они используют для этого, будут выпущены через API, но я не знаю, что эти данные пока доступны. У меня были случаи, когда это тоже было бы полезно, и до сих пор я либо просто центрировал изображение, либо использовал верхнюю часть. Однако это не идеально, поскольку FB уже позволяет и отслеживает пользовательское позиционирование наиболее важного «квадрата» изображения с помощью их создателя «значков».

Официально это сделать невозможно, вот глупый взлом. Следующий код гарантирует, что изображение не будет шире / выше 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>
  

Вы можете указать желаемый размер картинки с помощью аргумента type, который должен быть квадратным (50×50), маленьким (шириной 50 пикселей, переменной высотой) и большим (шириной около 200 пикселей, переменной высотой).

Из ссылки на Graph API. Это единственные доступные три размера. Вы можете использовать увеличенную версию изображения размером 50×50, но это, очевидно, будет выглядеть искаженным.

В настоящее время Graph фактически может возвращать вам квадратное изображение любого размера. Они кэшируют наиболее распространенные размеры (например, 100×100, 128×128) и возвращают ближайший размер по следующему запросу (наведите курсор, чтобы увидеть)

Как уже указывалось в других ответах, в facebook квадратные картинки представлены только в 50x50 разрешении.

Простой взлом CSS делает свое дело, хотя:

Запросите большое изображение, оберните 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=120amp;height=120);" class="profile-pic"></div>
  

Замените 120 пикселей в приведенном выше (встречается дважды в CSS и дважды во фрагменте HTML) на желаемые размеры.