Решение Границы Радиуса + Переполнение: Скрытая Проблема С Холстом

Передо мной стояла следующая задача:



Есть блок с фоном (не обязательно однородным), он содержит определенное количество круглых элементов с белым фоном, внутри которых находятся округлые картинки любого размера.

Если размер изображения меньше размера блока, оно центрируется (как по вертикали, так и по горизонтали), но если размер изображения больше размера блока, больший параметр изображения занимает 100% параметра блока, а второй параметр сохраняется.

пропорциональные отношения, как на исходном изображении.

Для многих не секрет, что если округлить саму картинку, то получится красиво, только с картинкой, соотношение сторон которой 1:1, в остальных случаях возникнут проблемы:



Использование стандартных свойств CSS (border-radius:150px; overflow:hidden;) по отношению к блоку с изображением во многих случаях не работает. (пока статья не была опубликована - старые) браузеры связь .

Можно найти много разных решений проблемы, но мне ни один из них не помог.

Предлагаю следующее решение (оно не универсальное, в т.ч.

не работает в IE7, IE8 ), но я считаю это полезным и работает во всех браузерах, поддерживающих холст. jsfiddle.net/iLight/EsFTG/23 Центрируйте изображения по вертикали:

   

 $('.

i-img-cont').

each(function(){
 

   

• Новый Apple Макбук

  19 Oct, 24

• Почему Safari Не Загружает Веб-Страницы?

  19 Oct, 24

• Google Adsense: Кто Хочет Зарабатывать Деньги С Помощью Adsense?

  19 Oct, 24

• Варианты Веб-Дизайна В Шеффилде Для Корпоративных Проектов

  19 Oct, 24

• Альфа-Банк Запустил Тестирование Финансового Помощника Sense И Опубликовал Приложение В App Store

  19 Oct, 24

• Новый Алгоритм Защиты От Спама Google

  19 Oct, 24

• Firefox И Русские Шрифты

  19 Oct, 24

• Paypal И Почта России.

  19 Oct, 24

• У Каждого Владельца Сайта Свой Поиск!

  19 Oct, 24

• Карта Веб-Трендов 3

  19 Oct, 24