css - 使用 css 在圆形中查看时，图像在底部被剪切

Question

我正在尝试使用此 CSS 代码在一个圆圈中查看用户的个人资料照片:

.circle {
    margin: auto;
    width: 200px;
    height: 200px;
    border-radius: 50%;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
    overflow:hidden;
    }
    .circle img{
        width:100%;
    }

<div class='circle'>
    <img src='https://static.pexels.com/photos/2438/nature-forest-waves-trees.jpg'>
        </div>

问题是，图像在底部被剪切:

但我希望图像显示为一个完整的圆圈。为什么会发生这种情况，我该如何解决？

Answer 1

根据我的评论，如果您希望显示整个图像，则需要使用正方形图像，否则您需要将图像的最短边设为 100% - 在这种情况下，图像是横向的，因此您需要将高度设置为 100%，以便隐藏额外的宽度:

.circle {
  margin: auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  overflow: hidden;
}

.circle img {
  height: 100%;
}

<div class='circle'>
  <img src='https://static.pexels.com/photos/2438/nature-forest-waves-trees.jpg'>
</div>