CODEWITHSUNDEEP
jqueryhtmlcss
user979331
user979331

Reputation: 11861

CSS circular image at any size

I am creating a circular image with CSS.

When my image is 200px x 300px, it's not a perfect circle:

.circular {
  margin: auto;
  width: 200px;
  height: 300px;
  border-radius: 150px;
  -webkit-border-radius: 150px;
  -moz-border-radius: 150px;
  background: url(https://i.sstatic.net/S1ZCs.jpg) no-repeat;
}
<div class="circular"></div>

Here is a jsFiddle as well.

Is there a way to make a perfect circle when the width and height are different sizes? If I set this to 300 x 300 it's a perfect circle, but I need it to be in a perfect circle when the image is 200 x 300.

Upvotes: 5

Views: 22576

Answers (10)

bolu
bolu

Reputation: 1

img {
    max-width: 150px;
    width: auto;
    max-height: 150px;
    height: 100%;
    border-radius: 50%;
    border: 10px solid transparent;
    margin-bottom: 0px;
    object-fit: scale-down;
    }

Blockquote

Upvotes: 0

Kris Stern
Kris Stern

Reputation: 1340

If I work in scss instead of css, the following is what worked for me to have a circular container that has max-diameter of 150 pixels, an with the image fully contained within this circular container so that the final image will not be collapsed into some oval shape instead: 

.circular-container {
    max-width: 150px;
    max-height: 150px;
    width: 100%;
    height: auto;
    border-radius: auto;

    img {
        max-width: 150px;
        width: auto;
        max-height: 150px;
        height: 100%;
        border-radius: 50%;
        border: 10px solid transparent;
        margin-bottom: 0px;
        object-fit: scale-down;
        }
    }

The equivalent in css would be:

.circular-container {
    max-width: 150px;
    max-height: 150px;
    width: 100%;
    height: auto;
    border-radius: auto;

.circular-container img {
    max-width: 150px;
    width: auto;
    max-height: 150px;
    height: 100%;
    border-radius: 50%;
    border: 10px solid transparent;
    margin-bottom: 0px;
    object-fit: scale-down;
}

Upvotes: 0

Prakash Upadhyay
Prakash Upadhyay

Reputation: 531

We can achieve it by changing the HTML structure a bit.

<div class="circular">
   <img src="img/desktop.jpg">
</div>

.circular { /* need to give parent container equal width and height*/
    margin: auto;
    width: 200px;
    height: 200px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    overflow:hidden;
}
.circular img{
    width:100%;
}

Demo http://jsfiddle.net/prakashup/2sb6srjp/

Upvotes: 1

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

You can make it with pseudo elements

.circular {
  margin: auto;
  width: 200px;
  height: 300px;
  overflow: hidden;
  background: red;
}
.circular:before {
  content: url('http://cdn.bavotasan.com/wp-content/uploads/2011/02/desktop.jpg');
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  width: 200px;
  height: 200px;
  overflow: hidden;
  display: block;
}
<div class="circular"></div>

Upvotes: 0

Mohd. Shaukat Ali
Mohd. Shaukat Ali

Reputation: 752

You can simply achieve this by making height and width value same and defining border-radius as 50%. here is the code..

.circular {
margin: auto;
width: 300px;
height: 300px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/02/desktop.jpg) no-repeat center center;
}

Upvotes: 0

CodingWithSpike
CodingWithSpike

Reputation: 43718

It doesn't matter what size the image is in your example because it is a bg image. The parts that don't fit will just not be rendered. If you need a 300px by 300px circle, then just leave the hight and width at 300. You can use background-size:cover; to make the image stretch to fit but preserve aspect ratio.

See here.

.circular {
margin: auto;
width: 300px;
height: 300px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJVLN-vcVHCOOLWmvihkfex1OFW0ZLVhQ7JQfcc4EH4YoJLTn68x8EpDls) no-repeat;
    background-size: cover;
}
<div class="circular"></div>
<br/><br/>
<div>Original image: <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJVLN-vcVHCOOLWmvihkfex1OFW0ZLVhQ7JQfcc4EH4YoJLTn68x8EpDls" /></div>

Upvotes: 1

misterManSam
misterManSam

Reputation: 24692

There is one way, with transform: scale, to wrestle it into shape. I don't know why you would need it... here it is anyway. The scale values would obviously need to change with the width / height.

Another problem is a background image would be distorted using this method.

div {
  width: 200px;
  height: 300px;
  background: #F00;
  border-radius: 50%;
  transform: scale(.76, .5)
}
<div><div>

Upvotes: 2

somethinghere
somethinghere

Reputation: 17340

You can't make it a circle if the values aren't square, its that simple. You can, however, make the wrapper square and hide the remains of the circle if you nest your image in it. It would be something like this:

.circular {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.circular img {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="circular">
  <img src="http://www.placehold.it/150" />
</div>

I usually wrap all the lines between and including position: and transform:in a separate CSS definition with the :nth-child(n)selector so the centering only works on browser that support nth-child, but thats just fine-tuning.

Upvotes: 19

Mehavel
Mehavel

Reputation: 595

you can use border-radius:100%. This can be used to create circle or ellipse shape. Also can be used anytime border-radius to be directly co-related to elements width

Upvotes: 0

hyperjelly
hyperjelly

Reputation: 13

As far as I'm aware, to achieve a circle using the border-radius property, your width and height values must be the same.

Upvotes: 0

Related Questions