convert rectangular image into Round image

Question

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

Answer 1

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" />

Answer 2

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>

Answer 3

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.