调整视口尺寸时如何防止背景图片比例改变

方案1：完整显示图片（无裁剪，允许空白区域） #

这种方式会让图片保持原始比例完整展示，不会裁剪任何部分，路径自然全程可见。只需修改background-size并添加居中定位：

.background-image {
  background-image: url(/images/main-background.jpg);
  background-size: contain; /* 保持图片比例，完整适配容器 */
  background-repeat: no-repeat;
  background-position: center; /* 图片在容器内居中 */
  height: 100vh;
  background-color: #与图片边缘匹配的颜色; /* 可选：填充空白区域的背景色 */
}

方案2：优先保留路径区域（覆盖容器，仅裁剪非关键部分） #

如果希望图片尽可能铺满容器，同时保证路径（假设路径在图片下半部分）不被裁剪，可调整定位并保留cover属性：

.background-image {
  background-image: url(/images/main-background.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom; /* 定位到图片下半部分，锁定路径区域 */
  height: 100vh;
}

方案3：精准适配不同屏幕比例 #

结合媒体查询，根据屏幕与图片的宽高比动态调整显示方式，确保图片始终无裁剪且贴合容器：

.background-image {
  background-image: url(/images/main-background.jpg);
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
}

/* 当屏幕宽高比大于图片宽高比时，高度填满视口，宽度自适应 */
@media (min-aspect-ratio: 16/9) { /* 替换为你实际图片的宽高比 */
  .background-image {
    background-size: auto 100%;
  }
}

/* 当屏幕宽高比小于图片宽高比时，宽度填满视口，高度自适应 */
@media (max-aspect-ratio: 16/9) { /* 替换为你实际图片的宽高比 */
  .background-image {
    background-size: 100% auto;
  }
}

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