Как сделать фото круглым css
Перейти к содержимому

Как сделать фото круглым css

  • автор:

Круглые изображения

Любые растровые изображения сами по себе прямоугольны, поэтому для создания сложной формы в картинках применяют прозрачность или фон, совпадающий с фоном веб-страницы. Действительно круглые изображения можно сделать с помощью стилевого свойства border-radius . К таким изображениям применяется рамка через border и она тоже будет круглой, а не квадратной. Если круглую картинку вставить в , то областью ссылки будет круг.

Чтобы сделать произвольное изображение круглым вначале следует превратить его в квадрат, а затем в стилях добавить свойство border-radius со значением 50% (пример 1). Лучше задавать именно в процентах, так мы не привязываемся к размерам картинок.

Пример 1. Круглые изображения

Изображения .round

Результат данного примера показан на рис. 1.

Круглые изображения

Рис. 1. Круглые изображения

border-radius применяется к любым другим элементам, поэтому мы можем создать пустой квадратный и установить для него фоновую картинку, которую допустимо масштабировать и сдвигать. Само изображение не обязательно должно быть квадратным, потому что оно будет вписано в область заданных размеров. Всё, что не поместится в эту область, будет обрезано. На рис. 2 показана фотографии для добавления её на веб-страницу.

Фотография акулы

Рис. 2. Фотография акулы

Теперь устанавливаем эту фотографию как фон для класса round , задаём размеры элемента и настраиваем масштаб изображения (пример 2).

Пример 2. Круглый элемент

Результат данного примера показан на рис. 3. Фон по умолчанию устанавливается в левом верхнем углу, так что сдвигаем его на 70 пикселей влево, чтобы акула оказалась в центре круга.

Круглое изображение

Рис. 3. Круглое изображение

См. также

  • border-radius
  • Оформление кнопок

Сделать из прямоугольного изображение круглое в css

Дано прямоугольное изображение в макете, которое необходимо сделать круглым. Обернул в див, обрезал края, но подвинуть, как на макете, не выходит..Проблема со сдвигом изображение в этом кругу. Может есть фича на Бутстрап какая, мало ли..

.item < margin-left: 150px; >.photo < width: 132px; height: 132px; margin: 0 auto; overflow: hidden; >.personPhoto
 

Как сделать круглые изображения?

Превратить изображения в круг и добавить вокруг них рамку.

Решение

Для скругления уголков у элементов в CSS3 предназначено свойство border-radius , значением которого выступает радиус закругления. Если взять квадратное изображение и добавить к нему это свойство, то мы получим уже не квадратное, а круглое изображение. В качестве значения следует задать половину ширины рисунка. Правда, можно поступить и проще и значением указать заведомо большое число, превышающее размеры изображения. Так мы в любом случае получим круглую картинку и сможем применять стиль к изображениям разного размера.

Плюсом использования border-radius является то, что мы можем добавлять в стилях к элементу рамку, тень и она будет повторять контур. В примере 1 показано создание круглых изображений, для чего вводится класс round , с тенью и рамкой.

Пример 1. Круглые изображения

HTML5 CSS3 IE Cr Op Sa Fx

    Круглые изображения   

Результат данного примера в Opera показан на рис. 1.

Круглые изображения

Рис. 1. Круглые изображения

Браузеры Chrome и Safari некорректно отображают скруглённые уголки, что выглядит довольно некрасиво (рис. 2).

Рамка в браузере Chrome

Рис. 2. Рамка в браузере Chrome

Здесь можно посоветовать только отказаться от рамки вообще или заменить border на свойство box-shadow . Вспоминаем, что оно может давать не только размытую тень, но и тень с резкими краями. К тому же box-shadow одновременно допускает наличие нескольких теней, параметры которых перечисляются через запятую. Таким образом, первая тень будет формировать рамку, а вторая добавлять затемнение. В примере 2 показан изменённый стиль, решающий проблему в Chrome с обрамлением.

Пример 2. Рамка из тени

HTML5 CSS3 IE Cr Op Sa Fx

    Круглые изображения   

Результат данного примера показан на рис. 3.

Рамка в браузере Chrome

Рис. 3. Рамка в браузере Chrome

Заметьте, что изображения теперь плотно прилегают друг к другу, для добавления пространства между ними примените свойство margin .

Как сделать круглый div / круглое фото?

Открыл недавно метрику на своем старом сайте, а на него есть несколько переходов с поисковиков. Посмотрел историю поисковых запросов и удивился, почти каждый день есть несколько посещений по запросам «как сделать круглый div», «как сделать круглое фото» и подобное. Оказывается многих интересует подобный вопрос, так давайте же разберем его.

Чтобы сделать круглый блок, необходимо воспользоваться CSS-свойством border-radius и задать ему значение 50%, то есть округлить каждый угол на половину ширины/высоты. В результате мы получим такое:

Как видим, мы получили почти круг, а почти, потому, что округление мы применили к прямоугольному блоку, чтобы получился красивый, правильный круг, необходимо прямоугольник превратить в квадрат, для этого блоку задаем одинаковую высоту и ширину:

  • CSS (правила для скругления)
.circle < width: 100px; /* задаете свои размеры */ height: 100px; border-radius: 50%; /* не забываем о кроссбраузерности */ -moz-border-radius: 50%; -webkit-border-radius: 50%; -khtml-border-radius: 50%; >

Код для вывода красивых аватаров пользователей с использованием теней и рамок.

 

.circle < width: 100px; /* задаете свои размеры */ height: 100px; overflow: hidden; background: #fff; padding: 5px; /* создание отступов */ border-radius: 50%; /* не забываем о кроссбраузерности */ -moz-border-radius: 50%; -webkit-border-radius: 50%; border: #aaa 1px solid; box-shadow: 0px 1px 1px 1px #bbb; /* тень */ -moz-box-shadow: 0px 1px 1px 1px #bbb; -webkit-box-shadow: 0px 1px 1px 1px #bbb; >.circle img

В результате получаем такие картинки

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *