Перед началом
Измерьте исходник и выберите толщину. Если важно сохранить всю фотографию, добавляйте место снаружи, а не закрывайте края внутренней обводкой.
Текстовое объяснение схемы
Фото 800 × 600 → Рамка 20 px → Файл 840 × 640. Фото 800 × 600 с рамкой 20 px снаружи становится 840 × 640. Если вместо этого нарисовать рамку внутри, она перекроет по 20 px изображения с каждой стороны.
Как сделать
- Для файла используйте расширение холста или отдельный слой под фотографией. Сохраняйте пропорции объекта и не растягивайте картинку вместе с рамкой.
- Для страницы примените 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 удваивает толщину. Проверьте сам экспорт на нейтральной подложке до правки стилей.
Источники и продолжение
- MDN — box-sizing
- Как сделать рамку вокруг рисунка в Фотошопе — 2009-10-07 (RU)
Схема и примеры: редакция Web Article. Схема объясняет принцип и не является снимком интерфейса или результатом испытания программы.