如何使用background-size让背景图完整填充div且不出现断裂？

问题现象 #

• 常规分辨率下，背景图显示正常无断裂：
  
• 小分辨率（900px-912px）下，背景图出现断裂：
  

当前CSS代码 #

基础样式 #

tfoot {
    display: grid;
    grid-column: 1 / -1;
    max-width: 100%;
    justify-content: right;
    background-image: url(https://dv.bamboostock.net/wp-content/uploads/2022/09/GABRIEL_png.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    margin-top: 130px;
    place-items: right;
}

断点样式（900px-912px） #

@media (min-width: 900px) and (max-width: 912px) {
    tfoot {
        max-width: 100% !important;
        background-size: contain;
        margin-top: 80px;
        justify-items: end;
    }
}

解决方案 #

要让背景图完整填充tfoot容器且无断裂，可按以下方式调整：

1. 统一背景尺寸逻辑，避免切换冲突
   基础样式用cover、断点用contain的切换逻辑差异大，易导致显示异常。若要背景图始终覆盖容器且保持比例，建议统一使用cover，同时给容器设置明确最小高度（grid布局下tfoot高度易受内容影响，会限制背景图显示）：

   @media (min-width: 900px) and (max-width: 912px) {
       tfoot {
           max-width: 100%;
           background-size: cover;
           background-position: left center; /* 保持对齐逻辑一致 */
           margin-top: 80px;
           justify-items: end;
           min-height: 200px; /* 替换为背景图适配的最小高度 */
       }
   }
   

2. 用比例撑开容器（适配图片原始比例）
   如果希望容器始终匹配背景图的宽高比，可通过padding-top按比例撑开，避免容器高度收缩导致背景图截断：

   tfoot {
       /* 其他样式不变 */
       padding-top: calc(背景图高度 / 背景图宽度 * 100%); /* 比如背景图宽高比为4:1，就设置25% */
       background-position: left top;
       background-size: cover;
   }
   

3. 调整背景定位优化显示
   当容器宽高比变化时，cover会裁剪图片，通过background-position可保证关键区域显示。比如要保留左侧内容完整，设置background-position: left center;，确保左侧始终在容器可视范围内。

4. 强制填充（允许图片变形）
   若不在意图片比例，仅要求完全填充容器，可直接设置：

   background-size: 100% 100%;
   

   此方式会让图片随容器比例拉伸变形，仅适合对比例要求低的场景。

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