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

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

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображения</title>
  <style>
   .round {
    border-radius: 50%;
   }
  </style>
 </head>
 <body>
  <img src="image/meduza1.jpg" alt="" class="round">
  <img src="image/meduza2.jpg" alt="" class="round">
  <img src="image/meduza3.jpg" alt="" class="round">
 </body>
</html>

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображения</title>
  <style>
  .round {
   width: 300px; height: 300px; /* Ширина и высота */
   border-radius: 50%; /* Превращаем в круг */
   background: url(/example/image/shark.jpg) no-repeat -70px 0; /* Параметры фона */
   background-size: auto 300px; /* Высота фотографии равна высоте элемента */
  }
 </style>
 </head>
 <body>
  <div class="round"></div>
 </body>
</html>

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

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

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

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 11.08.2018
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid