Промяна на снимка с CSS

http://premium.wpmudev.org/blog/make-images-in-wordpress-circular-with-css/
http://techkamar.blogspot.com/2013/12/how-to-make-circle-images-using-css.html
http://www.fiveforblogger.com/2011/07/rounded-corner-image-using-css3.html
http://creativenauts.me/2014/02/17/rounded-avatars-html-css/
http://www.smartredfox.com/2011/01/rounded-shadowed-and-shiny-pictures-with-css3/
 
На мен ми се наложи да правя същото нещо и използвайки border-radius се получи. Но имаше няколко бъга под сафари, които бяха доста странни.
Eто една илюстрация:

7473217u.jpg



http://jsfiddle.net/3XSJN/1/ - Демо
HTML:
<div class="activity_rounded">
<img src="http://placehold.it/100" />
</div>

[css].activity_rounded {
display: inline-block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
border: 3px solid #fff;
}

.activity_rounded img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
vertical-align: middle;
}[/css]
 
.activity_rounded с overflow: hidden и странните бъгове изчезват :))

и за по-лесно reuse-ване може img-то да получи border-radius: inherit :)

така като решиш да сменяш размера на радиуса ще го правиш само на едно място :)

И img-то е хубаво в този случай да се сложи с display: block, за да не изкарва празно място отдолу под някои browser-и
 

Горе