Абсолютно круглі зображення з допомогою CSS

58

Абсолютно круглые изображения с помощью CSS

Останнім часом у веб-дизайні стає дуже популярним використання круглих зображень. Приклад можна побачити у мене на блозі, мініатюри до записів виводяться максимально округлені, тобто абсолютно круглими. Існують різні способи реалізації виводу круглих картинок. Перевірений роками, працює у всіх браузерах без винятку, це попередня підготовка зображень в графічному редакторі, коли з стандартної картинки виділяється область кола і обрізається по контуру.
Тепер, це вже минуле століття, спосіб звичайно надійний, але не практичний. За допомогою властивостей CSS можна досягти тих самих результатів, при цьому позбавивши себе від необхідності готувати кожне зображення.

Мене часто запитують, як з допомогою CSS зробити зображення абсолютно круглими?
Представляю на ваш огляд самий простий і швидкий спосіб. Усього кілька рядків коду і ваші зображення стануть абсолютно круглими:

img {
width: 200px;
height: 200px;
border-radius: 50%;
}

img {
width: 200px;
height: 200px;
border-radius: 50%;
}

За умови, що всі сторони зображення рівні, тобто визначені рівні величини значень ширини width: і висоти height:, при цьому оригінал картинки може бути будь-якою.
Для наочності, щоб візуально був зрозумілий весь процес, з допомогою псевдокласу hover: визначив повернення картинки в стан з мінімальним округленням кутів, при наведенні на зображення.

У прикладі використав картинку розміром 367?268, для виведення на сторінці визначив розмір 200?200 і використовував процентне значення для border-radius:. Можна звичайно прописати значення і в px, просто ділите картинку навпіл, прописуєте в border-radius:100px і отримуєте таку ж абсолютно круглу картинку.

Використовувати цей метод можна де завгодно, мініатюри записів, аватари користувачів в коментарях і т. д., головне не перестаратися і вчасно притримати свою невгамовну фантазію)))
У IE8 підтримки властивості border-radius немає, так що користувачі, які продовжують вперто сидіти на цьому браузері, побачать ідеально квадратні картинки (((.

З Повагою, Андрій