overflow仅底部隐藏顶部不生效，图片组件样式匹配求助

直接用HTML+CSS就能实现你要的效果，代码如下：

结构代码 #

<!-- 容器承载边框背景，内部放人物图片 -->
<div class="img-container">
  <img src="你的人物图片地址" alt="player">
</div>

样式代码 #

.img-container {
  /* 若用现成的绿色边框白色背景图，用下面这行替代背景和边框样式 */
  /* background: url("你的框架背景图地址") no-repeat; background-size: 100% 100%; */
  
  /* 纯CSS绘制边框背景（更灵活） */
  width: 220px; /* 按实际框架尺寸调整 */
  height: 270px;
  background: #fff;
  border: 5px solid #34d399;
  border-radius: 10px;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，填满容器，裁剪多余部分 */
  /* 若要完整显示图片，替换为 object-fit: contain; */
}

注意事项 #

• 替换代码中的图片地址为你实际的图片路径
• 尺寸、边框颜色、内边距都可以根据你的需求调整
• object-fit属性可以控制图片的适配方式，按需选择

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