Html 如何使用css制作圆形img

我试图在一个简单的div中生成一个50%的四舍五入img。我尝试了两种方法，但显然这两种方法都不适用于我。 如果它让一些东西变得清晰，我得到的图像是正方形的

/*HTML*/

<div class="img-container"></div>

/*CSS*/
.img-container {
    background: url("../../../../../assets/img/user-photo.svg") no-repeat center top / cover;
    height: 125px;
    width: 125px;
    border-radius: 50%;
  }


/*HTML*/

<div class="img-container">
    <img src="path_to_img" alt="User photo">
</div>

/*CSS*/

.img-container {
     width: 125px;
     height: 125px;

     img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
     }
}

/*HTML*/
/*CSS*/
.img集装箱{
背景：url（“../../../../../../assets/img/user photo.svg”）无重复中心顶部/封面；
高度：125px；
宽度：125px；
边界半径：50%；
}
/*HTML*/
/*CSS*/
.img集装箱{
宽度：125px；
高度：125px；
img{
宽度：100%；
身高：100%；
边界半径：50%；
}
}

我把它的底部剪得很短。

---

在上面的两个例子中，是否有其他解决方案或我做错了什么？感谢您的帮助。

它可以正常工作。我认为你的图像有一些透明的部分

img{
盒影：2px2p5pRGBA（0,0,0,4）；
}
img.a{
宽度：64px；
边界半径：100%；
}
img.b{
宽度：64px；
边界半径：100%；
对象匹配：覆盖；
宽度：64px；
高度：64px；
}

非方形图像：

使用CSS转换为方形：

这是一些简单的标记，一个div容器和图像就足够了

如果图像可能具有不同的大小或形状，则可以使用该属性来确保其正确显示。只需确保您定义了图像所需的明确大小（高度和宽度），然后您就可以在img上使用

object fit:cover

，这样它就可以保持其纵横比，并使用exmaple的所有可用空间

.img容器{
背景颜色：紫色；
填充：10px0；
宽度：200px；
}
img{
边界半径：50%；
宽度：100px；
高度：100px；
显示：块；
保证金：0自动；
}
img.rect-img{
对象匹配：覆盖；
}

第二个CSS无效。什么无效？假设第二个是sassOh，我应该简单地解释一下，我实际上使用的是SCSS，这是否回答了你的问题？你的图像看起来是原因，而不是css。在图像中添加边框，然后查看是否有边框。这个答案帮助我使用object fit属性：）