Итак, как сделать круговое изображение только с помощью CSS?
В этой заметке ее автор расскажет вам, как использовать CSS для преобразования прямоугольного или квадратного изображения в круглое.
Округленное изображение с использованием CSS свойством border-radius
Самое простое решение для отображения изображения в виде круга с помощью CSS - это использование border-radius. Это свойство используется для создания закругленных границ для элементов HTML, поэтому оно также работает и для изображений.
Чтобы этот метод работал с изображениями любых размеров (в горизонтальной, вертикальной или горизонтальной ориентации), необходимо, чтобы изображение имело родительский HTML-элемент («обертку»). Мы будем использовать элемент span в качестве оболочки с именем CSS-класса circle-image.
Вот HTML-код:
HTML
И CSS для создания круглого изображения:
CSS
Вот и весь код CSS, который вам нужен для отображения круглого изображения!
Автор использовал display: inline-block, потому что элемент span по-умолчанию строчный, и ему нужно менять значение display, чтобы можно было установить размеры.
Установка значения border-radius равным 50% на самом деле и создает закругленное изображение с помощью CSS, поскольку оно округляет углы с радиусом 50% (половиной) от всего размера изображения.
Для img автор просто использовал 100% для размера, чтобы убедиться, что он плотно прилегает к элементу «обертки». Свойство object-fit: cover обеспечивает сохранение соотношения изображения, чтобы оно не растягивалось.
Этот подход довольно прост, но он не лишен неудобств. Например, вы должны указывать размер изображения. В примере автор поставил значение, равное 50px, а вам нужно будет указывать ваш размер.
Округленное изображение с использованием CSS свойством background-image
По сути, мы используем CSS, чтобы установить наше изображение в качестве фона HTML-элемента и сделать элемент округлым. Таким образом мы получим желаемый результат.
Вот HTML-код:
HTML
и CSS-код, закругляющий наше изображение:
CSS
Готово!
Если вам нужно расположить изображение внутри круга нестандартно, вы можете использовать CSS-свойство background-position, чтобы указать левую и верхнюю позиции или комбинации значений: bottom | top | center | left | right.
В большинстве случаев описанных решений будет достаточно, но что, если вам нужно сделать адаптивное изображение круга с помощью CSS?
Адаптивное закругленное изображение с использованием CSS
Нравится нам это или нет, но адаптивный веб-дизайн является важным требованием для веб-сайтов. Давайте посмотрим, что нам нужно изменить в нашем CSS-коде кругового изображения выше, чтобы сделать его адаптивным.
HTML-код остается прежним, потому что нам все еще нужен элемент-обертка:
HTML
и адаптивный CSS-код, закругляющий наше изображение:
CSS
Итак, что мы изменили?
Ну, во-первых, мы установили ширину (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.
Вот синтаксис:
CSS
Таким образом, с помощью этого свойства CSS вы можете обрезать элемент изображения в форме круга с указанным центром и радиусом.
HTML-код остается прежним:
HTML
А в CSS-коде адаптивного кругового изображения мы заменяем свойство border-radius на clip-path:
CSS
При добавлении свойства clip-path изображение обрезается в виде круга с радиусом, равным половине элемента «обертки».
Заключение
Мы рассмотрели несколько вариантов создания кругового изображения с помощью CSS. Теперь вы знаете все их «за» и «против». Если у вас есть какие-либо вопросы или замечания, пожалуйста, напишите автору комментарий в конце статьи и он постарается помочь.
Если вам понравился этот пост и вы хотите изучить HTML и CSS, автор рекомендует вам в следующий раз прочитать пост « Создание красивых HTML-диаграмм».
Оригинал статьи: CSS Circle Image: “How To” Complete Guide
Автор статьи: John Negoita
Перевод: Земсков Матвей