0

My Objective is to make an image round and display it. If the image is square then i am able to convert it in to round by simply using border-radius:50%property of CSS. But when the image is rectangular then using this CSS property is giving me oval shaped image.

One solution i thought of is first converting a rectangular image into square by using clip:rect(10px,0px,10px,0px) property. By using this it is clipping image into square but not removing the clipped space. i.e. it is making that part invisible but image is still rectangular.clipped part is invisible but taking space

Clipped part is invisible but still there. So even now i am trying to use border-radius:50% property it is giving me oval image with right and left side clipped.

Is there any way that i can solve this?

Ishan Khanduja
  • 121
  • 2
  • 9
  • maybe this? http://stackoverflow.com/questions/26421274/css-circular-cropping-of-rectangle-image – guergana May 10 '17 at 10:10
  • 1
    @guergana wow!! tried every kind of image.. worked like a charm.. mistake i was doing is using these tags in my image tag instead of using it in its container tag.. thanks a lot.. wish i could give you some points but my reputation score won't allow me :| once again thank you so much – Ishan Khanduja May 10 '17 at 11:01
  • I am glad I could help! – guergana May 10 '17 at 13:32
  • I can mark it as the solution and you can mark it as the correct solution I guess – guergana May 10 '17 at 13:33
  • You can try this. *Following up form the comment* http://stackoverflow.com/questions/26421274/css-circular-cropping-of-rectangle-image – guergana May 10 '17 at 13:33

3 Answers3

0

Check this: http://bennettfeely.com/clippy/ Using this you can clip a particular part of the image which you want in circle.

img {
  width: 280px;
  height: 280px;
  -webkit-clip-path: circle(50.0% at 50% 50%);
  clip-path: circle(50.0% at 50% 50%);
}


/* Center the demo */

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSCZNdFX5bx4Y_s8H-StHpWx3ujpCsG3qxhIu_-57pqSq3wKPEbndqnmROl" />
Nimish
  • 1,006
  • 1
  • 7
  • 19
0

This will solve your problem, But you will need to adjust width and height , image will be in center but you can adjust it using background-position: center;

<div style="margin-top:5%"> 
    <div style="height:200px;width:200px; margin: 5% auto;
         background-image: url(https://i.stack.imgur.com/oImMD.png);
         background-repeat: no-repeat;    border-radius: 50%;
         border: 5px solid #fff;background-position: center;">
    </div>
</div>
Sangwin Gawande
  • 7,658
  • 8
  • 48
  • 66
0

You need to define the width and height of the image and then apply border-radius to it.

Thus one way you could do is this

Solution 1

.circle-img {
   height: 100px;
   width: 100px;
   border-radius: 50%;
}

However this might make some distortion on the circular image output you were expecting. Thus what another way could be this

Solution2

.circle-wrapper {
   height: 100px;
   circle: 100px;
   overflow: hidden;
   border-radius: 50%;
}

What happens here is that it will hide anything that exceeds the specification of 100x100 and makes the circular effect.

Sagar
  • 477
  • 4
  • 15