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

[bganonymous]

Как мога да направя една снимка както е показано на тази снимка, с помощта на CSS и/или HTML?

 

[vinsbg]

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/

 

[Fakeheal]

На мен ми се наложи да правя същото нещо и използвайки border-radius се получи. Но имаше няколко бъга под сафари, които бяха доста странни.
Eто една илюстрация:

http://jsfiddle.net/3XSJN/1/ - Демо

<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]

 

[adrian]

.activity_rounded с overflow: hidden и странните бъгове изчезват )

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

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

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