如何使用CSS实现div盒子内的图片拉伸填满容器

需求说明 #

• 在class为.box a的容器内实现图片拉伸展示效果
• .box容器底部需预留75px高度区域，用于展示姓名、职位信息
• 现有代码运行后图片无法完全拉伸填满.box容器区域，需调整CSS达成预期效果

现有代码 #

HTML结构 #

<div className="row">
    <div className="squads">
        <div className="box a">A
            <img src="images/test1.png"/>
            <section className="squaddetails">
               <span>Test Man</span>
            </section>
            <section className="squaddetails">
               <span>Forward</span>
            </section>
        </div>
    </div>
</div> 

现有CSS #

@media (min-width: 1920px) {
    .squads {
        display: grid;
        grid-template-columns: 400px 400px 400px 400px !important;
        height: 600px !important;
        grid-gap: 10px !important;
        background-color: #fff;
        color: #444;
        margin: 20px 20px 10px 100px !important;
        padding: 20px;
      }
      
      .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px !important;
        font-size: 150%;
        border: solid 2px rgb(48, 27, 165);
      }
    
    .squads > .box img{
        max-width:100% !important;
    }
}

效果对比 #

• 预期效果
  
• 当前实际效果
  

调整方案 #

1. 首先清理HTML冗余内容：删除.box内部裸露的字符A，避免多余内容占位影响布局。
2. 修改.box基础样式，移除挤占内部空间的内边距，开启相对定位作为内部绝对定位元素的参照，同时裁剪溢出内容：

   .box {
       background-color: #444;
       color: #fff;
       border-radius: 5px;
       padding: 0 !important;
       font-size: 150%;
       border: solid 2px rgb(48, 27, 165);
       position: relative;
       overflow: hidden;
   }
   

3. 修改图片样式，让图片铺满除底部75px信息区外的全部区域，同时保证图片不变形：

   .squads > .box img{
       width: 100% !important;
       height: calc(100% - 75px) !important;
       object-fit: cover;
       display: block;
   }
   

4. 新增底部信息区样式，将姓名、职位区块固定在容器底部预留的75px区域内：

   .box .squaddetails {
       position: absolute;
       left: 0;
       width: 100%;
       height: 37.5px;
       padding: 0 20px;
       box-sizing: border-box;
       display: flex;
       align-items: center;
       margin: 0;
   }
   /* 姓名区块定位在底部区域上半段 */
   .box .squaddetails:nth-of-type(1) {
       bottom: 37.5px;
   }
   /* 职位区块定位在容器最底部 */
   .box .squaddetails:nth-of-type(2) {
       bottom: 0;
   }
   

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