Квадратные картинки Facebook

Ответ 1

Простой, я только что нашел это.

Пример

https://graph.facebook.com/friends_Id/picture?width=200&height=200

тада ~

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

В Справочник по API Графа. Это единственные доступные три размера. Вы можете использовать более крупную версию изображения 50x50, но она, очевидно, будет выглядеть затушеванной.

Ответ 5

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

Ответ 6

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

Простой CSS-хак делает трюк:

Запросить большое изображение, обернуть img -tag с помощью div и применить этот CSS к div:

img#facebook_img {
 width: YOUR_WIDTH;
}
div#wrapper {
 height: YOUR_HEIGHT;  
 overflow: hidden;  
}

Если YOUR_WIDTH и YOUR_HEIGHT совпадают, вы получаете свое квадратное изображение, и соотношение сохраняется.

Ответ 7

Ни один из ответов не работал отлично для меня, наткнувшись на фотографии профиля различных размеров (некоторые с большей высотой, чем ожидалось, некоторые с меньшей высотой), которые оказались либо растянутыми, либо не центрированными.

В конце я использовал элемент 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>

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