how to create circle image wrapper - html

Question

As shown below, how to create with css to which if users save the image to his/her machine image should be square and full width and height as original picture.

Answer 1

You can achieve this effect by setting the border radius of the image container, and applying a hidden overflow value. An example is here - http://jsfiddle.net/8jbD5/1
your html would be something like:
<div id="imgCont">
<img src="theimage.jpg" />
</div>
and the css:
#imgCont{border:8px solid #f00;border-radius:50%;overflow:hidden;width:200px;height:200px}
#imgCont img{width:100%;height:100%;}
I hope this helps...

Answer 2

See this example: http://dabblet.com/gist/5450624 (Tested on Firefox 20/Chrome).
I used a 400x400 jpg image and I've adjusted its top/left offset.
relevant CSS
div {
position: relative;
width: 0;
height: 0;
border: 180px silver solid;
-webkit-border-radius: 180px;
-moz-border-radius: 180px;
border-radius: 180px;
}
figure {
position: absolute;
top: -120px;
left: -180px;
width: 200px;
height: 200px;
border: 10px red solid;
overflow: hidden;
-webkit-border-radius: 120px;
-moz-border-radius: 120px;
border-radius: 120px;
}
img {
position: absolute;
z-index: 1;
left: -100px;
top: -100px;
}
Markup
<div>
<figure>
<img src="...">
</figure>
</div>
Sample Output

Answer 3

You have a few choices.
Firstly, you could have an element (say a div) with its background image as your original image. Then inside that div you had an image with part transparency for the inside of the inner circle, so that the original image shows through underneath.
Secondly, you could do similar to above, but instead of using a transparent image you could create circles using a mixture of CSS and HTML. There's some nice demos here.
Thirdly, and probably the most hacky way, would be to just put everything in to one image (like in your question) and use .htaccess to serve a different file on direct access. You may not get very reliable results though. Here's a nice SO answer which explains.