具有边框样式的 Flex 容器内图像的溢出问题

问：

我遇到了一个 flex 容器内的图像问题，其中该属性似乎被忽略了，导致在使用边距或填充时出现溢出问题。该问题发生在三个不同的组件中：、 和 。box-sizing: border-box;appheadshome

应用组件：

<!-- App component HTML -->
<div class="nav" [ngClass]="{ scrolled: isScrolled }">
   <div class="logo">
    <img src="./../assets/player.png" alt="" />
    <span class="set1">Harmony<span class="set2">Hub</span></span>
  </div>
</div>
<router-outlet></router-outlet>

/* App component SCSS */
.nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 5rem;
  background-color: transparent;
  &.scrolled {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  .logo {
    width: 7%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 3rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

堆组件：

<!-- Heads component HTML -->
<div class="container">
    <div class="head"></div>
  <div class="body">
    <div class="item item1">
      <div class="holder"><img src="./../../../assets/c1.avif" alt="" /></div>
      <div class="content">
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui,
          reprehenderit?
        </p>
      </div>
    </div>
    <div class="item item2">
      <div class="holder"><img src="./../../../assets/c2.webp" alt="" /></div>
      <div class="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque,
          officia.
        </p>
      </div>
    </div>
  </div>
</div>

/* Heads component SCSS */
.container {
  width: 100%;
  height: 100%;
  padding: 1rem;
  background-color: #000000;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  .head,
  .body {
    height: 100%;
    transition: 0.3s ease-in-out;
    border-radius: 5px;
  }
  .head:hover {
    background-color: #333333;
  }
  .body {
    display: flex;
    .item {
      img {
        width: 50%;
        border-radius: 5px;
        padding: 1rem;
      }
      margin: 1rem;
      border-radius: 5px;
      width: 100%;
      transition: 0.3s ease-in-out;
      &:hover {
        background-color: #333333;
      }
    }
  }
}

主页组件：

<!-- Home component HTML -->
<div class="container">
  <div class="head">
    <app-heads></app-heads>
  </div>
  <div class="list">
    <app-list></app-list>
  </div>
</div>

/* Home component SCSS */
.container {
  width: 100%;
  padding-top: 5rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  .head,
  .list {
    width: 65%;
    height: 80vh;
    border-radius: 2rem;
  }
}

组件中 div 中的图像未粘附在属性上，从而导致溢出问题。如何确保 flex 容器中的图像正确遵循属性，并在使用边距或填充时防止溢出？任何帮助或见解都值得赞赏！.itemHeapbox-sizing: border-box;box-sizing