html - 在保持宽高比的同时使整个图像呈圆形

Question

我试图在保持宽高比的同时以圆形形式显示整个图像(不裁剪或隐藏它的任何部分)。 我只想使用 css。

我试过这个:

#propic
{
width:150px;
height:150px;
background-size:cover;
display:block;
border-radius:100px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
}

它确实以圆形形式显示我的图像，但不保持纵横比。 我再次尝试了这个:

#propic
{
width:150px;
height:auto;
background-size:cover;
display:block;
border-radius:100px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
}

它确实保持纵横比但形状变成椭圆形。 我怎样才能做到这一点？

提前致谢。

Answer 1

“保持纵横比”的含义并不完全清楚，因为 div 将是一个圆圈。如果您在宽图像上保持纵横比，顶部和底部将有一个空白区域以适应圆的宽度

#propic {
    width:150px;
    height:150px;
    border-radius:50%;
    background-image: url(http://lorempixel.com/g/400/200/);
    background-position: center;
    background-size:100% auto;
    background-repeat: no-repeat;
}

<div id="propic"></div>

作为替代方案，您可以左右裁剪图像，使图像仍然 100% 高

background-size:auto 100%;

JSfiddle 2nd Option