Question

我有一个方形图像，我想把它放在一个圆圈边框内。我怎样才能使整个图像适合而不是切角？

.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。

Answer 1

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

因此，添加以下属性：

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

JSFiddle

请注意，蓝色块不会触及圆圈，因为图像具有透明边框。

更新：作为cassiorenan correctly points out，如果您更改圆圈的大小，则使用百分比可以让图片自动缩放。由于1 / sqrt（2）= 0.707 ...，您可以使用70.7％而不是141px：

background-size: 70.7%;

Answer 2

将背景大小更改为百分比（因此，无论您更改圆的宽度/高度，它仍然具有相同的相对大小。）并将其居中。当你在它的时候，告诉它不要重复。在您的特定情况下，此代码有效：

    .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: 90%;   
        background-repeat: no-repeat;
        background-position:center;
    }

编辑：固定代码格式化。

Answer 3

正如我在评论中所说，您必须删除图片周围的透明边框/空格，或者如果您不想这样做，请使用此CSS

.circle {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 100px;
  background: 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') center;
  background-size: 130%;   
}

Answer 4

为背景提供类似background-size: 100px;的大小，然后将其放在div的中心并告诉它不要重复：

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

编码现在应该是这样的：

.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: 100px;   
    background-position:center center;
    background-repeat:no-repeat;
}

JSFiddle Demo

如何在圆形边框内放置方形HTML图像？

4 个答案: