Этот Image Circle Cropper бесплатен и позволяет вам использовать его неограниченное количество раз и изображение круга кадрирования онлайн.
Быстро
Его обработка кругов изображения является мощной. Таким образом, для обрезки выбранного изображения по кругу требуется меньше времени.
Охрана
Как сделать круглую рамку вокруг аватарки
Приложение бесплатное. Есть платные рамки (обозначены пиктограмкой с изображение замка).
Но бесплатных вариантов более чем достаточно.
Приложение интуитивно понятно. Вначале выбираете рамку. Крупный «плюс» на рамке показывает, что с его помощью нужно выбрать фото. А крупная кнопка с надписью Save используется для сохранения результата:
Фото внутри рамки можно увеличивать или уменьшать, а также центровать в заданных границах рамки при помощи пальцев.
Есть возможность изменить цветовую гамму рамки. Передвигая бегунок по цветовому полю, выбирайте подходящий цвет:
Рамку можно повернуть по оси. Поворот может быть полезен в случае ассиметричного расположения какого-то элемента, который перекрывает значимую часть фото.
КАК СДЕЛАТЬ ФОТКУ КРУГЛОЙ? (рамка) ДЛЯ ПЕРЕПИСОК❤️
Кроме того, есть небольшое количество фильтров , которые можно применить к фото.
Зачем нужна рамка?
Чтобы аватар выделялся среди множества других при просмотре в ленте инстаграм. Меняйте рамки в зависимости от времени года, значимого события или настроения и ваше фото всегда будет не таким, как у всех.
Изображение в круглой рамке, конечно же, можно использовать не только в качестве аватара в любой соцсети или мессенджере, но и как изображение для поста.
Источник: dzen.ru
Как сделать изображение круглым на CSS
Чтобы сделать изображение круглым с помощью CSS, нужно применить свойство border-radius.
Базовое изображение (квадратное)
Добавим в файл стилей класс для изображений, которые должны быть круглыми. Например, .avatar для всех аватарок. Используем свойство CSS3 border-radius для добавления закругленных углов к изображению. Значение 50% сделают их круглыми.
img.avatar
Теперь изображение стало круглым.
Оригинальные решения получаются при использовании разных радиусов скругления для углов элемента.
img.avatar < border-radius: 54% 46% 47% 53% / 24% 55% 45% 76%; >
Bootstrap
Если вы используете Bootstrap 4, добавьте класс rounded-circle (или img-circle для Bootstrap 3) к элементу img, чтобы легко изменить его на круглое.
Источник: apsolyamov.ru