SCSS无法将图片放入圆形容器问题求助

我尝试将图片适配到圆形容器中，但目前图片仅显示为方形，无法呈现圆形效果。我怀疑SCSS中的&符号可能导致了问题，但由于需要将图片置于Grid单元格内并使单元格及其内容继承Grid属性，必须保留该符号。

HTML代码 #

<script type="text/html" id="member-card">
  <button class="list-item">
      <div class="list-icon">
        <img aria-hidden="true" data-bind="attr: { src: 'https://picsum.photos/72/72' }" />
      </div>
  </button>
</script>

<h1>Responsive Flexbox</h1>

<div class="container">
  <div data-bind="template: {name: 'member-card'}"></div>
  <div class='list-item'>1</div>
</div>

SCSS代码（原代码） #

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 176px);
  around*/
}

.list-item {
  margin: 3px;
  border: 1px solid black;
  height: 170px;
  border-radius: 4px;
  background: rgb(255, 255, 255, 0.7);
  min-width: 170px;

  & .list-icon {
    position: relative;
    width: 1.75rem;
    max-width: 10%;
    padding: 0;
    align-self: center;
    border-radius: 50%;
  }
}

问题分析与解决 #

你的问题和&符号无关，主要是容器与图片的样式设置不完整导致的：

1. .list-icon只设置了宽度，无对应高度，无法形成正圆；
2. 未给容器添加overflow: hidden，图片会直接撑满容器，不会被圆形边框裁剪；
3. 原代码中rgb(255,255,255,0.7)格式错误，应使用rgba格式；
4. .container中的around*/是未完成属性，需补全为justify-content: space-around。

修改后的SCSS代码：

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 176px);
  justify-content: space-around;
}

.list-item {
  margin: 3px;
  border: 1px solid black;
  height: 170px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  min-width: 170px;
  display: flex;
  align-items: center;
  padding: 1rem;

  & .list-icon {
    position: relative;
    width: 4rem;
    height: 4rem; /* 宽高一致才能形成正圆 */
    border-radius: 50%;
    overflow: hidden; /* 裁剪超出圆形的图片部分 */

    img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* 保持图片比例，避免拉伸变形 */
    }
  }
}

核心修改说明 #

• 给.list-icon设置相等的宽高，确保容器为正圆形；
• 添加overflow: hidden，隐藏图片超出圆形边框的部分；
• 对图片设置object-fit: cover，保证图片填满容器且比例正常；
• 修正了颜色格式与Grid布局的属性错误。

内容的提问来源于stack exchange，提问作者rsp