<div class="circle-img">

<img src="path_to_your_image.jpg" alt="Circle Image">

</div>

.circle-img {

  width: 100px;  /* 设置宽度 */

  height: 100px; /* 设置高度 */

  overflow: hidden; /* 超出部分隐藏 */

  border-radius: 50%; /* 设置边框半径为50%，形成圆形 */

  position: relative; /* 相对定位 */

}

.circle-img img {

  width: 100%; /* 图片宽度为容器宽度 */

  height: auto; /* 图片高度自动调整 */

  position: absolute; /* 绝对定位 */

  top: 0; /* 顶部对齐 */

  left: 0; /* 左边对齐 */

}

这段代码会创建一个宽高都是100像素的圆形容器，并在其中放置一个圆形图片。图片会完全填充容器，并且超出容器部分的图片将被隐藏。