Размещаем круглые изображения на веб-странице

1 способ. Обрабатывать каждое изображение в графическом редакторе перед размещением на сайте.

Этот способ неудобен, потому что занимает лишнее время.

2 способ. Использовать CSS для маскировки изображения.

Для использования этого способа сначала, нужно создать «изображение-маску» с прозрачной окружностью в центре. Подразумевается, что все картинки, на которые будет наложена «маска», имеют одинаковый размер. Размер маски должен быть таким же, как у изображений. Создаем маску в Adobe Photoshop или другом графическом редакторе.

Квадратиками показана прозрачная область. Сохраняем картинку-маску в формате PNG. При сохранении в поле “Matte” выбираем “white”.

Далее переходим к верстке. Создаем в текстовом редакторе, например, в Notepad++ html-страничку и вставляем в нее следующий код:

HTML

  <div id="expml1">
    <img src="/img/cat.jpg" />
    <img src="/img/mask.png" class="mask" />
  </div> 

Блок с id="expml1" – будет контейнером для изображений. Изображений будет 2 – собственно картинка и «маска». Изображение «маски» будет абсолютно позиционировано относительно контейнера, а картинка, которую нужно показать в круге не будет «выпадать» из нормального потока документа. В итоге получится, что абсолютно позиционированное изображение «маски» «накроет» основную картинку. Чтобы все это произошло нужно написать следующие CSS-правила:

CSS

   #expml1{
       position: relative;
   }
   
   #expml1 .mask{
       position: absolute;
       top:0;
       left:0;
   }

Есть еще один способ поместить изображение под «маской» с помощью CSS. Подход будет немного другой.

HTML

   <div id="expml2">
      <img src="/img/mask.png" style="background: url('/img/cat.jpg') no-repeat;"  />
   </div>

Здесь вообще все просто: размещаем на странице «картинку-маску», а основное изображение делаем ее фоном.

Может случиться так, что основное изображение будет немного крупнее, чем «картинка-маска», тогда, можно его центрировать.

CSS

   background:url(img/cat.jpg) no-repeat 50% 50%;

3 способ. Использовать правило CSS3 border-radius.

На данный момент самый правильный способ. Первые 2 можно считать устаревшими и использовать их только для отображения в браузерах, не поддерживающих border-radius.

Просто применим правило к рисунку. Рисунок должен быть квадратным. Можно оформить в виде класса.

HTML

   <div id="expml3">
      <img src="/img/image.jpg" class="rouned" />
   </div>

CSS

.rounded{border-radius:50%;}