How can I fit a square HTML image inside a circle border?

Question

I have a square image, and I'd like to put it inside a circle border. How can I make it so that the entire image fits instead of its corners getting cut?

.circle {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    border-radius: 100px;
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png');
    background-size: contain;   
}

Here it is on jsfiddle.

Answer 1

You need to shrink the image slightly to make it fit within the circle. To calculate the exact size, divide the diameter of the circle by sqrt(2). In this case, 200px / sqrt(2) is about 141px.

Thus, add the following properties:

background-size: 141px;
background-repeat: no-repeat;
background-position: 50%;

JSFiddle

Note that the blue block doesn't touch the circle because the image has a transparent border.

UPDATE: As cassiorenan correctly points out, using a percentage allows the image to automatically scale if you change the size of the circle. Since 1 / sqrt(2) = 0.707..., you can use 70.7% instead of 141px:

background-size: 70.7%;