Вариантов два, стилями и скриптом:
Скриптом - брать с картинки ссылку на изображение и прописывать ее фоном:
Варианты 1
Html
Код
<img class="roundImg" src="/_source/_img/anime_800x600/002_800x600.jpg" alt="" />
CSS
Код
span.roundImgOut{
width:600px;height:600px;overflow:hidden;-moz-border-radius:100em;-khtml-border-radius:100em;border-radius:100em;
border:3px solid #999;display:inline-block;background-size:100% 100%;
}
.roundImg{vertical-align:top;}
JavaScript
Код
<script type="text/javascript">
$('.roundImg').wrap(function(){
return '<span class="roundImgOut" style="background:url('+this.src+') no-repeat center center;"/>';
}).hide(0);
</script>
Как видим, скрипт оборачивает картинку блоком с фоном == этой картинке, саму картинку скрывает.
Пример:
☑ roundImgOut v1 Demo
Варианты 2
Html
Код
<div class="roundImgBox">
<img style="vertical-align:top;" src="/_source/_img/anime_800x600/002_800x600.jpg" alt="" />
</div>
CSS
Код
div.roundImgBox{
width:600px;height:600px;overflow:hidden;border:3px solid #999;margin:0 auto;background-size:100% 100%;-moz-border-radius:100em;-khtml-border-radius:100em;border-radius:100em;
}
JavaScript
Код
<script type="text/javascript">
$('.roundImgBox img').hide(0,function(){return $(this.parentNode).css({background:'url('+this.src+') no-repeat center center'});});
</script>
То же самое, только в профиль.
Как видим, у картинки уже есть родительский блок, так что просто прописываем ему фон и скрываем изображение.
Пример:
☑ roundImgOut v2 Demo
И варианты без скриптов.
Принцип - определение размеров картинки .. как бы так сказать, принудительное задание их ей.
Варианты 3
Не лучший, но надежный.
Html
Код
<table cellpadding="0" cellspacing="0" border="0" class="roundImgBox"><tr><td>
<img src="/_source/_img/anime_800x600/002_800x600.jpg" alt="" />
</td></tr></table>
CSS
Код
table.roundImgBox{
border:0;border-collapse:separate;border-spacing:0;-moz-border-radius:100em;-khtml-border-radius:100em;border-radius:100em;border:3px solid #999;table-layout:fixed;width:600px;overflow:hidden;margin:0 auto;
}
table.roundImgBox td{height:600px;overflow:hidden;}
table.roundImgBox img{
height:100%;width:100%;-moz-border-radius:100em;-khtml-border-radius:100em;border-radius:100em;border:0;
}
Пример:
☑ roundImgOut v3 Demo
Варианты 4
Принцип тот-же, им пользуется относительное положение родительского блока + задание картинке 100% размеров.
Html
Код
<div class="roundImgBox">
<img src="/_source/_img/anime_800x600/002_800x600.jpg" alt="" />
</div>
CSS
Код
div.roundImgBox{
width:600px;height:600px;overflow:hidden;
border:3px solid #999;margin:0 auto;
-moz-border-radius:100em;-khtml-border-radius:100em;border-radius:100em;
}
div.roundImgBox img{
position:relative;
height:100%;width:100%;
-moz-border-radius:100em;-khtml-border-radius:100em;border-radius:100em;
}
Пример:
☑ roundImgOut v4 Demo
Ну.. вот так, как-то.
Остальное - вариации на тему.
ps
Проверить на оперу скриптом вот так:
Код
if(window.opera){
/* что-то делаем */
}