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

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

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

Округленное изображение с использованием CSS свойством border-radius

Самое простое решение для отображения изображения в виде круга с помощью CSS - это использование border-radius. Это свойство используется для создания закругленных границ для элементов HTML, поэтому оно также работает и для изображений.

Чтобы этот метод работал с изображениями любых размеров (в горизонтальной, вертикальной или горизонтальной ориентации), необходимо, чтобы изображение имело родительский HTML-элемент («обертку»). Мы будем использовать элемент span в качестве оболочки с именем CSS-класса circle-image.

Вот HTML-код:

	<span class="circle-image">
	 <img src="/your-image.jpg"/>
	</span>

И CSS для создания круглого изображения:

	.circle-image{
	  display: inline-block;
	  border-radius: 50%;
	  overflow: hidden;
	  width: 50px;
	  height: 50px;
	}
	.circle-image img{
	  width:100%;
	  height:100%;
	  object-fit: cover;
	}

Вот и весь код CSS, который вам нужен для отображения круглого изображения!

Автор использовал display: inline-block, потому что элемент span по-умолчанию строчный, и ему нужно менять значение display, чтобы можно было установить размеры.

Установка значения border-radius равным 50% на самом деле и создает закругленное изображение с помощью CSS, поскольку оно округляет углы с радиусом 50% (половиной) от всего размера изображения.

Для img автор просто использовал 100% для размера, чтобы убедиться, что он плотно прилегает к элементу «обертки». Свойство object-fit: cover обеспечивает сохранение соотношения изображения, чтобы оно не растягивалось.

Этот подход довольно прост, но он не лишен неудобств. Например, вы должны указывать размер изображения. В примере автор поставил значение, равное 50px, а вам нужно будет указывать ваш размер.

Округленное изображение с использованием CSS свойством background-image

По сути, мы используем CSS, чтобы установить наше изображение в качестве фона HTML-элемента и сделать элемент округлым. Таким образом мы получим желаемый результат.

Вот HTML-код:

и CSS-код, закругляющий наше изображение:

	.circle-image{
	  width: 50px;
	  height: 50px;
	  background-image: url('your-image.jpg');
	  background-size: cover;
	  display: block;
	  border-radius:50%;
	}

Готово!

Если вам нужно расположить изображение внутри круга нестандартно, вы можете использовать CSS-свойство background-position, чтобы указать левую и верхнюю позиции или комбинации значений: bottom | top | center | left | right.

В большинстве случаев описанных решений будет достаточно, но что, если вам нужно сделать адаптивное изображение круга с помощью CSS?

Адаптивное закругленное изображение с использованием CSS

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

HTML-код остается прежним, потому что нам все еще нужен элемент-обертка:

	<span class="circle-image">
	 <img src="/your-image.jpg"/>
	</span>

и адаптивный CSS-код, закругляющий наше изображение:

	.circle-image{
		display: inline-block;
		overflow: hidden;
		width: 33%;
		padding-bottom: 33%;
		height: 0;
		position: relative;
	}
	.circle-image img{
	  width:100%;
	  height:100%;
	  position: absolute;
	  border-radius: 50%;
	  object-fit: cover;
	}

Итак, что мы изменили?

Ну, во-первых, мы установили ширину (width) элемента span («обертки») в процентах. Это делает изображение круга адаптивным. Автор использовал значение, равное 33%, поэтому он будет масштабирован до 1/3 контейнера изображения.

Мы знаем, что для размещения адаптивных изображений, нужно использовать намного больше CSS, таких как, например, медиа-запросы, но это выходит за рамки этой статьи.

Есть один хитрый трюк, чтобы превратить фигуру в квадрат: установка height равной 0 и padding-bottom, равного ширине (width) элемента. Это нужно нам для того, чтобы убедиться, что изображение становится кругом, а не сжатым овалом.

Этот трюк автор статьи придумал не сам, а нашел здесь.

И последнее, что мы установили для элемента «обертки» - правило position: relative. Это связано с тем, что изображение внутри будет иметь position: absolute, и мы хотим, чтобы изображение было позиционировано как абсолютное, относительно элемента обтекания, а не всего документа. Наконец, мы снова установим border-radius равный 50%, но на этот раз для изображения. Это сделает изображение закругленным.

Закругленное изображение с использованием CSS свойством clip-path

Теперь давайте рассмотрим другой способ использования CSS для закругления изображений.

CSS-свойство clip-path создает область отсечения, которая определяет, какая часть элемента должна отображаться. Части, которые находятся внутри области, показаны, а те, которые снаружи, скрыты. Одним из значений этого свойства CSS является circle.

Вот синтаксис:

clip-path: circle( [  ]? [ at  ]? )

Таким образом, с помощью этого свойства CSS вы можете обрезать элемент изображения в форме круга с указанным центром и радиусом.

HTML-код остается прежним:

	<span class="circle-image">
	 <img src="/your-image.jpg"/>
	</span>

А в CSS-коде адаптивного кругового изображения мы заменяем свойство border-radius на clip-path:

	.circle-image{
		display: inline-block;
		overflow: hidden;
		width: 33%;
		padding-bottom: 33%;
		height: 0;
		position: relative;
	}
	.circle-image img{
	  width:100%;
	  height:100%;
	  position: absolute;
	  clip-path: circle(50%);
	  object-fit: cover;
	}

При добавлении свойства clip-path изображение обрезается в виде круга с радиусом, равным половине элемента «обертки».

Заключение

Мы рассмотрели несколько вариантов создания кругового изображения с помощью CSS. Теперь вы знаете все их «за» и «против». Если у вас есть какие-либо вопросы или замечания, пожалуйста, напишите автору комментарий в конце статьи и он постарается помочь.

Если вам понравился этот пост и вы хотите изучить HTML и CSS, автор рекомендует вам в следующий раз прочитать пост « Создание красивых HTML-диаграмм».

Оригинал статьи: CSS Circle Image: “How To” Complete Guide

Автор статьи: John Negoita

Перевод: Земсков Матвей