Html 在保持纵横比的同时，使整个图像呈圆形

我试图以圆形形式显示整个图像（不剪切或隐藏任何部分），同时保持纵横比。 我只想使用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;
}

它确实以圆形的形式显示了我的图像，但没有保持高宽比。 我又试了一次：

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

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

---

提前感谢。

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

#propic{
宽度：150px；
高度：150像素；
边界半径：50%；
背景图片：url(http://lorempixel.com/g/400/200/);
背景位置：中心；
背景尺寸：100%自动；
背景重复：无重复；
}

---

您是否尝试过

边框半径：50%

？可能重复的请同时显示您的HTML。@web tiki我想我没有问过如何将矩形图像做成圆形（我能做到，我甚至做到了）如果你使用的是

img

实际上我想做一些像谷歌那样的事情，但不是裁剪图像。也许你最好告诉我们你想做什么，因为它不清楚。当我们在gmail或g+中设置个人资料图片时，我们首先需要裁剪出我们想要设置为个人资料图片的区域。但这里我想要的是避免所有这些裁剪问题，只是将整个图像显示为一个圆，而不是在显示为一个圆时挤压或拉伸图像。我能把自己弄清楚吗？不太清楚……如果图像不拉伸或被裁剪，它就不能是矩形的，也不能是圆形的。如果它不能是矩形，它可以是正方形吗？