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