Как сделать круг в css

  
текст

  
текст

  
текст

  
текст

  
текст

  
текст

  
текст

  
текст

  
текст

 class="circle">

.circle  background: #black; border-radius: 50%; > 

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

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

Вы всегда можете использовать графический редактор, например, Gimp или Photoshop чтобы обрезать изображение в виде круга или даже использовать онлайн-инструменты, такие как MockoFun, чтобы обрезать изображение онлайн. Но эта заметка о том, как сделать круглые изображения с помощью CSS.

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

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

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

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

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

 
   
И CSS для создания круглого изображения:
 .circle-image < display: inline-block; border-radius: 50%; overflow: hidden; width: 50px; height: 50px; >.circle-image img
Вот и весь код CSS, который вам нужен для отображения круглого изображения!
Автор использовал display: inline-block , потому что элемент span по-умолчанию строчный, и ему нужно менять значение display , чтобы можно было установить размеры.






Установка значения border-radius равным 50% на самом деле и создает закругленное изображение с помощью CSS, поскольку оно округляет углы с радиусом 50% (половиной) от всего размера изображения.
Для img автор просто использовал 100% для размера, чтобы убедиться, что он плотно прилегает к элементу «обертки». Свойство object-fit: cover обеспечивает сохранение соотношения изображения, чтобы оно не растягивалось.
Этот подход довольно прост, но он не лишен неудобств. Например, вы должны указывать размер изображения. В примере автор поставил значение, равное 50px , а вам нужно будет указывать ваш размер.






Округленное изображение с использованием CSS свойством background-image
По сути, мы используем CSS, чтобы установить наше изображение в качестве фона HTML-элемента и сделать элемент округлым. Таким образом мы получим желаемый результат.
и CSS-код, закругляющий наше изображение:
 .circle-image
Если вам нужно расположить изображение внутри круга нестандартно, вы можете использовать CSS-свойство background-position , чтобы указать левую и верхнюю позиции или комбинации значений: bottom | top | center | left | right .






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






 
   
и адаптивный CSS-код, закругляющий наше изображение:
 .circle-image < display: inline-block; overflow: hidden; width: 33%; padding-bottom: 33%; height: 0; position: relative; >.circle-image img
Итак, что мы изменили?
Ну, во-первых, мы установили ширину ( 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-код остается прежним:
 
   
А в CSS-коде адаптивного кругового изображения мы заменяем свойство border-radius на clip-path :
 .circle-image < display: inline-block; overflow: hidden; width: 33%; padding-bottom: 33%; height: 0; position: relative; >.circle-image img
При добавлении свойства clip-path изображение обрезается в виде круга с радиусом, равным половине элемента «обертки».
Заключение
Мы рассмотрели несколько вариантов создания кругового изображения с помощью CSS. Теперь вы знаете все их «за» и «против». Если у вас есть какие-либо вопросы или замечания, пожалуйста, напишите автору комментарий в конце статьи и он постарается помочь.
Если вам понравился этот пост и вы хотите изучить HTML и CSS, автор рекомендует вам в следующий раз прочитать пост « Создание красивых HTML-диаграмм ».
Оригинал статьи: CSS Circle Image: “How To” Complete Guide
Автор статьи: John Negoita
Перевод: Земсков Матвей


Похожие публикации:

Как добавить свою музыку в яндекс музыку
Как повысить фпс в фортнайт на телефоне андроид
Какой самсунг s серии лучше купить
Почему ворд не дает редактировать документ