Сделать из прямоугольного изображение круглое в css
Дано прямоугольное изображение в макете, которое необходимо сделать круглым. Обернул в див, обрезал края, но подвинуть, как на макете, не выходит..Проблема со сдвигом изображение в этом кругу. Может есть фича на Бутстрап какая, мало ли..
.item < margin-left: 150px; >.photo < width: 132px; height: 132px; margin: 0 auto; overflow: hidden; >.personPhoto
Круглые изображения
Любые растровые изображения сами по себе прямоугольны, поэтому для создания сложной формы в картинках применяют прозрачность или фон, совпадающий с фоном веб-страницы. Действительно круглые изображения можно сделать с помощью стилевого свойства border-radius . К таким изображениям применяется рамка через border и она тоже будет круглой, а не квадратной. Если круглую картинку вставить в , то областью ссылки будет круг.
Чтобы сделать произвольное изображение круглым вначале следует превратить его в квадрат, а затем в стилях добавить свойство border-radius со значением 50% (пример 1). Лучше задавать именно в процентах, так мы не привязываемся к размерам картинок.
Пример 1. Круглые изображения
Результат данного примера показан на рис. 1.
Рис. 1. Круглые изображения
border-radius применяется к любым другим элементам, поэтому мы можем создать пустой квадратный и установить для него фоновую картинку, которую допустимо масштабировать и сдвигать. Само изображение не обязательно должно быть квадратным, потому что оно будет вписано в область заданных размеров. Всё, что не поместится в эту область, будет обрезано. На рис. 2 показана фотографии для добавления её на веб-страницу.
Рис. 2. Фотография акулы
Теперь устанавливаем эту фотографию как фон для класса round , задаём размеры элемента и настраиваем масштаб изображения (пример 2).
Пример 2. Круглый элемент
Результат данного примера показан на рис. 3. Фон по умолчанию устанавливается в левом верхнем углу, так что сдвигаем его на 70 пикселей влево, чтобы акула оказалась в центре круга.
Рис. 3. Круглое изображение
См. также
- border-radius
- Оформление кнопок
Как сделать круглые изображения?
Превратить изображения в круг и добавить вокруг них рамку.
Решение
Для скругления уголков у элементов в CSS3 предназначено свойство border-radius , значением которого выступает радиус закругления. Если взять квадратное изображение и добавить к нему это свойство, то мы получим уже не квадратное, а круглое изображение. В качестве значения следует задать половину ширины рисунка. Правда, можно поступить и проще и значением указать заведомо большое число, превышающее размеры изображения. Так мы в любом случае получим круглую картинку и сможем применять стиль к изображениям разного размера.
Плюсом использования border-radius является то, что мы можем добавлять в стилях к элементу рамку, тень и она будет повторять контур. В примере 1 показано создание круглых изображений, для чего вводится класс round , с тенью и рамкой.
Пример 1. Круглые изображения
HTML5 CSS3 IE Cr Op Sa Fx
Круглые изображения 
Результат данного примера в Opera показан на рис. 1.
Рис. 1. Круглые изображения
Браузеры Chrome и Safari некорректно отображают скруглённые уголки, что выглядит довольно некрасиво (рис. 2).
Рис. 2. Рамка в браузере Chrome
Здесь можно посоветовать только отказаться от рамки вообще или заменить border на свойство box-shadow . Вспоминаем, что оно может давать не только размытую тень, но и тень с резкими краями. К тому же box-shadow одновременно допускает наличие нескольких теней, параметры которых перечисляются через запятую. Таким образом, первая тень будет формировать рамку, а вторая добавлять затемнение. В примере 2 показан изменённый стиль, решающий проблему в Chrome с обрамлением.
Пример 2. Рамка из тени
HTML5 CSS3 IE Cr Op Sa Fx
Круглые изображения
Результат данного примера показан на рис. 3.
Рис. 3. Рамка в браузере Chrome
Заметьте, что изображения теперь плотно прилегают друг к другу, для добавления пространства между ними примените свойство margin .
Как вставить картинку
собственно, у него одно главное свойство это src, в которую можно вставить ссылку на любую картинку.
Ссылку в браузере можно получить очень легко, если тыкнуть на любую картинку и выбрать
и дальше скопированное значение вставить в атрибут src
src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Haanja_2010_01_1.jpg/1200px-Haanja_2010_01_1.jpg" alt=""> правда она немедленно займет ровно столько места сколько ей нужно:
поэтому по-хорошему размеры картинок лучше ограничивать используя те же стили. Например, я могу сказать, чтобы высота картинки была ровно 250px
style="height: 250px" src=". " alt=""> и получится уже так
так как картинка — это обыкновенный блок, то ее можно стилизовать как угодно, например, добавить тень или границу
class="main-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Haanja_2010_01_1.jpg/1200px-Haanja_2010_01_1.jpg" alt=""> .main-image height: 250px; border: 1px solid silver; margin: 8px; box-shadow: 0 0 16px silver; border-radius: 16px; > 
Как сделать квадратную картинку
Вообще, чтобы сделать квадратную картинку, в идеале нужно чтобы и исходник был квадратный. Можно конечно попробовать указать свойство width равное height вот так
.main-image height: 250px; width: 250px; border: 1px solid silver; margin: 8px; box-shadow: 0 0 16px silver; border-radius: 16px; > но тогда у картинки поползут пропорции
в общем самый универсальный способ, которые работает и для квадратных и для прямоугольных картинок – это положить картинку в квадратный блок:
class="main-image-wrapper"> class="main-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Haanja_2010_01_1.jpg/1200px-Haanja_2010_01_1.jpg" alt=""> /* в блок перенесли все свойства из main-image */ .main-image-wrapper width: 250px; height: 250px; border: 1px solid silver; margin: 8px; box-shadow: 0 0 16px silver; border-radius: 16px; > .main-image height: 100%; /* тут поставили такое свойство, чтобы картинка по высоте равнялась высоте обертки */ > 
Чет не работает… если присмотреться, то видно, что на заднем фоне появилась квадратная тень, но картинка то все равно не квадратная
Тут проблема в том, что картинка вылазит за границы блока, а блок ее никак не ограничивает.
Чтобы ничего не вылезало, есть волшебное свойство overflow: hidden , которое отключает отрисовку кусков изображений (да и не только изображений), которые вылазят за границы.
.main-image-wrapper width: 250px; height: 250px; border: 1px solid silver; margin: 8px; box-shadow: 0 0 16px silver; border-radius: 16px; overflow: hidden; /* добавил */ > .main-image height: 100%; > 
Делаем круглую картинку
Чтобы сделать круглую картинку надо чтобы она была квадратная, либо внутри квадратного блока. Это у нас уже готово.
Есть свойство border-radius в котором указывается радиус закругления краев блока. Мы туда пока пихали только пиксельные размер, а если поставить туда значение 50% то радиус закругления будет равен половине стороны квадраты и получится круг, вот так:
.main-image-wrapper width: 250px; height: 250px; border: 1px solid silver; margin: 8px; box-shadow: 0 0 16px silver; border-radius: 50%; /* поставил 50% */ overflow: hidden; > .main-image height: 100%; > 
все это можно обернуть во flexы и получить что-нибудь красивое
style="display: flex; justify-content: center;"> style="display: flex; flex-direction: column; align-items: center;"> class="main-image-wrapper"> class="main-image" src=". " alt=""> style="font-size: 2em;">Зима style="font-size: 1em;">близко 
вот и вся наука)
[Бонус] крутящиеся иконки
В fontawesome есть встроенная поддержка крутящихся иконок, прочитать подробнее можно тут: https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons в общем если хочется добавить крутящуюся иконку то делается это так:
lang="en"> rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" /> style="display: flex; justify-content: center;"> style="display: flex; flex-direction: column; align-items: center;"> class="main-image-wrapper"> class="main-image" src=". " alt=""> style="font-size: 2em;">Зима class="fas fa-cog fa-spin">