Решение проблемы border-radius + overflow:hidden с помощью canvas

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

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

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

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

Я предлагаю следующее решение (оно не универсально, в т.ч. не работает в IE7, IE8) но я считаю его полезным.

jsfiddle.net/iLight/EsFTG/23/

Центрируем картинку по вертикали:

$('.i-img-cont').each(function(){ 	$(this).find('img').css('margin-top', parseInt(-$(this).find('img').height()/2)); }); 

Заменяем картинку на canvas

var i=0, mywidth, myheight;		 $('.i-img-cont').each(function(){     var contWidth = $(this).width(),         contHeight = $(this).height(), //получаем значение ширины и высоты контейнера         cnv = document.createElement("canvas"); //создаем канву     cnv.width=contWidth;     cnv.height=contHeight;	//задаем ей значения высоты и ширины такие как у контейнера				     $(this).prepend(cnv); //добавляем в начало контейнера канву, картинка при этом просто уезжает вниз     i++;     var j=i-1;     $(this).find('canvas').attr('id', 'canvas'+j); //даем канве свой id     var ctx = document.getElementById('canvas'+j).getContext('2d'), //инициализируем контекст         img = new Image(), //создаем в канве картинку         attrsrc=$(this).find('img').attr('src'); //получаем путь исходной картинки     img.src = attrsrc; //присваиваем картинке в канве путь исходной картинки				     img.onload = function(){         mywidth = $('#canvas'+j).next('img').width();         myheight = $('#canvas'+j).next('img').height(); //получаем высоту и ширину исходной картинки         var xpos = (contWidth-mywidth)/2,          ypos = (contHeight-myheight)/2; //рассчитываем расположение картинки в канве         ctx.drawImage(img, xpos, ypos, mywidth, myheight);	//рисуем картинку на холст     }	 }); 

Затем просто закругляем canvas:

.i-img-cont canvas{border-radius:150px;} 

Можно так же указать браузеры в которых не нужно создавать canvas (Напимер FF, IE9-10, Chrome). Или те в которых это необходимо, чтобы не делать лишней работы для «умных» браузеров.

P.S. Excanvas не выручает, если есть решения для IE7-8, кроме вырезания уголков в фотошопе — буду признателен.