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

[GreatRash]

Костыль на костыле короче… ох уж этот CSS3. За решение спасибо, пригодится.

[tanz_sullamora]

А вам обязательно нужно использовать img, можно же воспользоваться другим элементом и свойством background-size: cover, если IE7-8 не нужны. Как-то так http://jsfiddle.net/B5cJv/

[tanz_sullamora]

Хотя, поправлю сам себя — не подходит по условию центрирования изображения меньше размером, чем блок.

[Jabher]

а я вам три решения еще принес.
jsfiddle.net/eqJnK/

Первое — работает почти везде, но с изображениями меньше размера контейнера, в противном случае начинается сдвиг вправо, по вертикали продолжает центроваться.
Второе — ie9+, все хочу про эту пепяку написать, собственная разработка. Из минусов — сложно дергать анимации.
Третье — да, собственно, что вам нужно.

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

это просто background-size: cover

[iLight]

первые два решения заработают только на последней версии оперы, раньше уголки вылезали, а background-size: cover — растягивает маленькие картинки, а по условию они должны центрироваться.

[Jabher]

Кстати, последняя — 16-я уже, так что last-1 критерий соблюдается — с 15-й версии опера на вебките работает, где оба варианта поддерживаются.
Ну да это уже скорее придирки.

[Kotofey]

Решение навскидку.
Размещаем .png-рамку с прозрачным кругом по середине, а под ним уже размещаем нужную нам картинку.
(да-да, ИЕ ранних версий не сильно дружны с .png, но все же заставить их подружиться можно)

[iLight]

Решение имеет место, но только если фон однородный или блок фиксированной высоты и фоновая картинка не меняется, в остальных случаях не подходит.