CSS-使图像填充NOT STRETCH圆形div？

Question

我知道这有很多问题，但即使看了几个问题，我也很难过。我需要将图像放大，以便在div中填充BUT NOT STRETCH（保持光谱比率）。

这是html：

<div class = "profileimage"><img src = "image.jpeg"/> </div>

然后在css中我将图像宽度设置为100％并正确调整div的大小，但仍然没有得到正确的结果 -

这就是我得到的（只是图像全宽）：

Answer 1

您忘了overflow

  overflow:hidden;

.profileimage{
position:relative;
  width:200px;
  height:200px;
  border-radius:50%;
  overflow:hidden;
  
}
.profileimage img{max-width:100%;}

<div class = "profileimage"><img src = "https://cdn2.iconfinder.com/data/icons/professions/512/user_boy_avatar-512.png"/> </div>