Trying to circular crop image with HTML and CSS - html

Question

I realize there is another thread that addresses this issue, but I'm having trouble implementing some of the suggestions to my particular situation. As of now I'm kind of experimenting but would appreciate any suggestions. Here is a screenshot of the portrait that I want cropped in a circle: http://imgur.com/autCwaj
Although I may be way off course, my code is as follows--
The HTML:
<section class="hero">
<div class="content">
<div class="image-cropper">
<img class="my-picture" src="http://imageweb-cdn.magnoliasoft.net/bridgeman/supersize/xir245162.jpg" alt="This is a picture of me">
</div>
<p class="iama">My name is...</p>
<p class="my-name my-info">Jason Brain</p>
<p class="iama">I want to be (eventually)...</p>
<p class="my-info">A front end, full stack, and iOS developer</p>
</div>
</section>
The CSS:
.image-cropper {
width: 100px;
height: 100px;
position: relative;
}
.my-picture {
display: block;
margin: 0 auto;
height: 100%;
width: auto;
border: 2px solid white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
Thanks for your assistance everyone.

Answer 1

If you want a circle instead of an oval, you'll need to rearrange some CSS. The outer div needs to be square and the image needs to stretch the small of its two dimensions to 100% of the otter div.
.image-cropper {
width: 100px;
height: 100px;
position: relative;
border: 2px solid white;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
overflow:hidden;
}
.my-picture {
display: block;
margin: 0 auto;
height: auto;
width: 100%;
}
<section class="hero">
<div class="content">
<div class="image-cropper">
<img class="my-picture" src="http://imageweb-cdn.magnoliasoft.net/bridgeman/supersize/xir245162.jpg" alt="This is a picture of me"/>
</div>
<p class="iama">My name is...</p>
<p class="my-name my-info">Jason Brain</p>
<p class="iama">I want to be (eventually)...</p>
<p class="my-info">A front end, full stack, and iOS developer</p>
</div>
</section>