15 идей — как посадить персонажа в рамке

Один и тот же workspace-preview, разные CSS-приёмы. Подбирайте под зону UI из 10 макетов размещения.

← Каталог точек в UI

01 · Лицо в верхней трети

cover; center 20% — сайдбар и портреты.

02 · Полоса Voice 120px

Как .discuss-agent-preview-wrap в проде.

03 · Широкий баннер

Акцент на плечи и фон, лицо не обрезать слишком низко.

04 · Постер 3:4 в герое

Высокий кадр по центру экрана Voice.

05 · Круглый аватар

Шапка Shell, сообщения чата.

06 · Contain целиком

Pet и PNG с прозрачностью — без обрезки.

07 · Blur + чёткий центр

Фон окна Voice, низкая opacity.

08 · Fade вниз в чат

Градиент поверх картинки к цвету панели.

09 · Слайдер эмоций

Несколько файлов в slider/.

10 · Лёгкий zoom (Ken Burns)

Как анимация orbit/shine в сайдбаре.

11 · Якорь снизу

Персонаж «стоит» над панелью микрофона.

12 · Профиль влево

Смотрит на ленту сообщений справа.

13 · Профиль вправо

Зеркально для другого layout чата.

14 · Silhouette / mono

Компакт-режим, меньше отвлекает от текста.

full-src
без thumb=1

15 · Thumb + lightbox

Миниатюра → data-full-src по клику.