求助：两Div背景图超1920px宽设备错位问题修复方案

看起来你遇到的核心问题是：当屏幕宽度超过1920px时，两个div的背景图从对齐变成了错位。这主要是因为你在大屏下切换了background-size属性——从auto 100%改成了cover，而如果两张背景图的宽高比不一致，cover的裁剪逻辑会导致它们的相对位置偏移。

我给你整理了两个关键的解决思路，以及优化后的代码：

思路1：统一背景图的缩放与定位策略 #

避免在不同屏幕尺寸下切换完全不同的缩放规则，确保两个div的背景图始终使用相同的定位和缩放逻辑，从根源保持对齐：

/* 基础公共样式：保证两个div的背景行为完全一致 */
.productTopSection, .mc-key-points {
  min-height: 895px;
  background-repeat: no-repeat;
  background-position: center top; /* 锚定顶部作为对齐基准，避免垂直偏移 */
  background-size: auto 100%; /* 高度铺满容器，宽度自适应，保证垂直维度对齐 */
}

/* 分别设置背景图 */
.productTopSection {
  background-image: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg");
}

.mc-key-points {
  background-image: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg");
}

/* 大屏设备：保持与小屏一致的缩放策略，避免错位 */
@media only screen and (min-width: 1921px) {
  .productTopSection, .mc-key-points {
    /* 如果你希望大屏下图片宽度铺满容器，需确保两张图比例完全一致，再启用下面的代码 */
    /* background-size: 100% auto; */
    background-size: auto 100%;
    background-position: center top;
  }
}

/* 移动端样式保持不变 */
@media only screen and (max-width: 1200px) {
  .productTopSection {
    background-image: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image-mobile.jpg");
    background-size: cover;
  }
  .mc-key-points {
    background-image: none;
  }
}

思路2：确保背景图的宽高比完全一致 #

如果必须在大屏下使用background-size: cover，那必须保证两张背景图的原始宽高比完全相同。比如：

• 检查两张图的尺寸，比如都是1920px × 895px
• 如果比例不同，用图片编辑工具调整其中一张（比如添加空白边距或裁剪到相同比例），这样cover裁剪时的区域会完全匹配，对齐自然就能保持。

额外小贴士 #

• 尽量用background-position: center top（或精确数值50% 0）代替center center，锚定一个固定的对齐点，减少不同屏幕高度下的偏移概率
• 把公共样式抽离出来，避免重复代码，也能防止因为样式不一致导致的隐性错位

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