Css / Html：自動調整圓圈中的圖像大小

Question

我想將圖像圈成一個圓圈。

我的代碼工作正常，但是如果圖像太大，則圖像無法調整大小，並且圓圈中什么也看不到。

我如何自動調整圖像大小以放入圈子？

這是html代碼：

    <div class="roundedImage" style="background: url(img/desktop/personne.jpg) no-repeat 0px 0px;">
&nbsp;
</div>

這是CSS代碼：

.roundedImage {
    overflow:hidden;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;
    width:90px;
    height:90px;
}

現在，結果如下：

Answer 1

要使背景圖像完全填充可用空間，您可以使用background-size: cover; ：

.roundedImage {
    background: url(http://placehold.it/50x50);
    background-repeat: no-repeat;
    background-size: cover;

    overflow:hidden;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;
    width:90px;
    height:90px;
}

請注意，我已經在CSS代碼中添加了內聯樣式。

jsFiddle

Answer 2

使用CSS屬性background-size設置在div中作為背景的圖像的大小：

.roundedImage {
    overflow:hidden;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;
    width:90px;
    height:90px;
    background-size:90px 0px; 
}