html - CSS Circular Cropping of Rectangle Image -

html - CSS Circular Cropping of Rectangle Image -

i want create centered circular image rectangle photo. photo's dimensions unknown. it's rectangle form. i've tried lot of methods:

css:

.image-cropper { max-width: 100px; height: auto; position: relative; overflow: hidden; } .image-cropper img{ display: block; margin: 0 auto; height: auto; width: 150%; margin: 0 0 0 -20%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; }

html:

<div class="image-cropper"> <img src="http://www.electricvelocity.com.au/upload/blogs/smart-e-bike-side_2.jpg" class="rounded" /> </div>

the approach wrong, need apply border-radius container div instead of actual image.

this work:

html

<div class="image-cropper"> <img src="http://www.electricvelocity.com.au/upload/blogs/smart-e-bike-side_2.jpg" class="rounded" /> </div>

css

.image-cropper { width: 100px; height: 100px; position: relative; overflow: hidden; border-radius: 50%; } img { display: inline; margin: 0 auto; height: 100%; width: auto; }

and a working fiddle here

html css