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