我怎样才能适应圆形边界内的方形HTML图像？ [英] How can I fit a square HTML image inside a circle border?

问题描述

我有一个方形图像，我想把它放在一个圆形边界内。

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;   
}

这是 jsfiddle 。

推荐答案

以使其适合圈内。要计算确切的大小，请将圆的直径除以sqrt（2）。在这种情况下，200px / sqrt（2）大约为141px。

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.

更新：正如 cassiorenan正确指出一样，使用百分比允许图像自动缩放，如果你改变圆的大小。由于1 / sqrt（2）= 0.707 ...，您可以使用70.7％而不是141px：

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%;

这篇关于我怎样才能适应圆形边界内的方形HTML图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！