网页背景图md尺寸响应正常 sm/xs尺寸下被裁剪如何修复

问题原因 #

1. 你当前设置的background-size: cover规则特性为：始终缩放背景图直至完全覆盖容器，当容器宽高比和背景图不一致时，一定会裁剪超出部分。sm、xs等小屏为竖屏窄宽度，和横屏的原图宽高比差异大，因此裁剪严重。
2. 存在属性配置错误：background-position: relative是无效值，relative是元素定位position属性的可选值，并非背景定位的合法配置。
3. 容器固定height: 100vh，小屏宽度收缩后，容器宽高比和原图差异进一步拉大，加剧裁剪问题。
4. 额外注意：body设置了padding-top: 120px，会将高度为100vh的背景图容器向下偏移120px，导致背景图底部超出视口被额外裁剪。

修复方案 #

步骤1：调整HTML结构，移除错误的行内样式 #

将背景相关的配置从行内样式移到CSS文件中，方便写响应式规则：

<div class="bg-image" style="background-image: url('img/cattery/main-photo-cut.jpg');"></div>

步骤2：新增CSS响应式配置 #

.bg-image {
  /* 修正背景定位为居中，保证图片主体默认在容器中间 */
  background-position: center center;
  background-repeat: no-repeat;
  /* 抵消body的padding-top偏移，避免背景图被顶部导航遮挡 */
  margin-top: -120px;
  height: 100vh;
  /*  md及以上尺寸保留原来的cover效果，和你之前的表现一致 */
  background-size: cover;
}

/* 适配sm、xs小屏，断点数值可根据你使用的UI框架规则调整，Bootstrap默认sm断点为576px */
@media (max-width: 576px) {
  .bg-image {
    /* contain规则会完整展示整张背景图，不会裁剪 */
    background-size: contain;
    /* 锁定和原图一致的宽高比，避免上下留白过多，数值按你实际的原图比例调整即可 */
    aspect-ratio: 16/9;
    height: auto;
  }
}

可选优化 #

如果不希望小屏使用contain出现留白，也可以保留background-size: cover，只调整background-position为你要保留的核心区域位置，比如你要保证猫咪的脸在可视范围内，就设置为background-position: 30% center，调整百分比数值控制裁剪区域，优先保留主体内容。

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