React项目中图片无法被包含在目标div内的问题求助

我尝试将图片放置在class为icons的div容器内，但图片意外跳出了该容器。所有元素都处于flexbox布局中，在该div内放置文本可正常显示，但放入图片就出现异常。我已用红圈标注了对应的图片和div，完整代码可查看GitHub仓库，同时附上了问题截图。

相关代码片段 #

CSS代码 #

.landing {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
 
}
.introWrapper {
  width: 1000px;
}

.intro1 {
  font-size: 25px;
  text-align: center;
  font-family: 'Yapari';
  align-items: center;
  justify-content: center;
  margin-top: 23px;
}
.intro2 {
  font-size: 25px;
  text-align: center;
  font-family: 'Yapari';
  /* font-weight: 72; */
  margin-top: 50px;
}
#introCircle {
  border: 2px solid black;
  border-radius: 50%;
  width: 230px;
  height: 70px;
  margin: auto;
}
.icons {
  border: 2px solid black;
  height: 50px;
}
.icon1 {
  width: 30px;
}

JSX代码 #

<div id='landing' className={styles.landing}>
      <div className={styles.introWrapper}> 
        <div className={styles.icons}>
          <img src={icon1} className={styles.icon1}/>
        </div>
        <div id={styles.introCircle}>        
          <h1 className={styles.intro1}>HELLO I'M</h1> 
        </div>       
        <LastName />
          <h1 className={styles.intro2}>A FULL STACK DEVELOPER</h1>
      </div>
    </div>

解决方案 #

原因分析 #

icons容器未设置flex布局，图片作为替换元素默认以行内块形式渲染，基线对齐规则会让图片底部产生额外间隙，视觉上呈现跳出容器的效果；另外未限制图片最大高度，若图片比例导致高度超出容器内容高度，也会直接溢出。

具体解决方法 #

方法1：将容器改为flex容器并居中图片

修改.icons的CSS，让容器成为flex容器，同时控制图片在容器内的对齐：

.icons {
  border: 2px solid black;
  height: 50px;
  display: flex;
  align-items: center; /* 垂直居中图片 */
  padding: 0 8px; /* 可选，给图片添加左右内边距 */
}

方法2：限制图片高度并消除行内间隙

给图片设置max-height: 100%确保不超出容器，同时设置display: block消除行内元素的基线间隙：

.icon1 {
  width: 30px;
  max-height: 100%;
  display: block;
}

方法3：统一盒模型（可选）

给所有元素设置box-sizing: border-box，让容器的高度包含border，避免边框导致容器实际高度超出预期：

* {
  box-sizing: border-box;
}

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