Рамка навколо зображення: де її створювати

Перед початком

Виміряйте оригінал і виберіть товщину. Щоб зберегти все фото, додайте місце зовні, а не закривайте краї внутрішнім обведенням.

Для файлу розширте полотно або додайте шар під фото. Збережіть пропорції предмета, не розтягуючи його разом із рамкою.
Для сторінки застосуйте border і box-sizing: border-box. Сумарна ширина зображення, меж і відступів має вміщуватися в контейнер.
Перевірте світле й темне тло. Якщо фото є посиланням, залиште видимий клавіатурний фокус: декоративної межі недостатньо для позначення дії.

Приклад коду

.photo { box-sizing: border-box; border: 1px solid #27241f; max-width: 100%; }

Фото 800 × 600 із зовнішньою рамкою 20 px стає 840 × 640. Внутрішня рамка такої товщини закриє по 20 px фотографії з кожного боку.

Розміри відповідають макету, край фото не втрачено випадково, на телефоні немає горизонтального прокручування.

Однакова рамка у файлі та CSS подвоює товщину. Перш ніж змінювати стилі, перевірте експорт на нейтральному тлі.

Схема й приклади: редакція Web Article. Схема пояснює принцип і не є знімком інтерфейсу або результатом випробування програми.