Круглые изображения с помощью css

Количество просмотров: 477

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

Для реализации данного эффекта можно, конечно обрезать каждое изображение в графическом редакторе и потом загружать на сайт. Но нужен ли нам этот долгий способ? Конечно нет, ведь есть CSS.

Как сделать круглое изображение с помощью CSS?

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

А теперь применим к нему следующие свойства.


img {
	border-radius:50%;
}

Вуаля и наша картинка стала круглой. Свойство border-radius скругляет углы и его можно применять к любым элементам, к картинке или например к div`у в котором лежит картинка. Здорово, не правда ли? Но это еще не все. Добавим дополнительные свойства для поддержки старыми браузерами, а так же свойство object-fit со значение cover. Данное свойство определяет, каким образом содержимое будет подогнано к краям контейнера, значение cover говорит о том, что содержимое будет выровнено по центру, с сохранением пропорций таким образом, что заполнит весь контейнер.


img {
	border-radius:50%;
        object-fit: cover;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}

Если применив данные стили вы наблюдаете не полностью круглое изображение, а вытянутое со скругленными углами, то скорее всего у вашего изображения высота привышает ширину, чтобы сделать данное изображение круглым, зададим контейнеру фиксированную ширину и высоту. Примерные размеры представлены ниже:


img {
  border-radius:50%;
  object-fit: cover;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  width:300px;
  height: 300px;
}

© 2015-2018 Goodweb.me --- Карта сайта --- info@goodweb.me

Наверх