CODEWITHSUNDEEP
htmlcss
Navin Rauniyar
Navin Rauniyar

Reputation: 10525

how to create circle image wrapper

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.

enter image description here

Upvotes: 1

Views: 1824

Answers (3)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123367

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

output

Upvotes: 1

LeonardChallis
LeonardChallis

Reputation: 7783

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.

Upvotes: 0

lukeocom
lukeocom

Reputation: 3243

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

Upvotes: 2

Related Questions