响应式列布局下第二个div无法与首个div同步缩放

缩放不同步是几个CSS硬伤导致的：

• 背景图容器.overlap_img写死了固定px高度，内部padding、文字大小全是固定px值；而图片容器里的img是宽度自适应、高度自动按比例计算的，二者缩放逻辑完全不一样，自然没法同步
• 1000px断点已经把父容器.main_left_container改成display: block了，875px断点里写的.flex { flex-direction: column; }根本没有对应的DOM元素，属于无效代码
• .overlap_img里重复写了两次height，后面的固定px值直接覆盖了前面的height:100%，高度完全不会随宽度变化
• 切到block布局后没清掉旧的flex属性，会干扰尺寸计算

修复后CSS #

.main_left_container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1175px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  position: relative;
}

.image_container {
  flex-basis: 65%;
  flex-shrink: 0;
  flex-grow: 0;
  width: 65%;
  min-width: 65%;
}
.image_container img {
  width: 100%;
  height: auto;
  display: block;
}

.overlap_img {
  background-image: url("https://i.imgur.com/g00dAUi.jpeg");
  background-size: cover;
  background-position: center;
  flex-basis: 30%;
  flex-shrink: 0;
  flex-grow: 0;
  width: 30%;
  min-width: 30%;
  position: relative;
  left: -100px;
  bottom: -60px;
  /* 用宽高比替代固定高度，实现等比缩放 */
  aspect-ratio: 16 / 9;
  padding: 3vw 4vw;
  color: #fff;
  box-sizing: border-box;
}

.overlap_img h3 {
  margin-top: 0;
  font-size: clamp(18px, 3vw, 30px);
}

.overlap_img p {
  margin-top: 0;
  font-size: clamp(14px, 2vw, 18px);
}
.overlap_img .button {
  font-size: clamp(12px, 1.5vw, 16px);
  padding: clamp(8px, 1vw, 12px) clamp(16px, 2vw, 3rem) !important;
  display: inline-block;
}

@media (max-width: 1250px) {
  .main_container {
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
  }
  .overlap_img {
    flex-basis: 25%;
    width: 25%;
    min-width: 0;
    bottom: -75px;
  }
}

@media (max-width: 1000px) {
  .main_container {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
  }
  .main_left_container {
    display: block;
    width: 100%;
  }
  .image_container {
    width: 100%;
  }
  .overlap_img {
    /* 清除block布局下无效的flex属性 */
    flex: none;
    width: 84.70%;
    left: 50px;
    bottom: 85px;
  }
}

@media (max-width: 950px) {
  .overlap_img {
    left: 0;
    bottom: 4px;
  }
}

@media (max-width: 875px) {
  .main_left_container {
    max-width: 575px;
    padding: 0 16px;
    box-sizing: border-box;
  }
  .overlap_img {
    width: 78.27%;
  }
}

/* 补充极小屏适配，防止内容溢出 */
@media (max-width: 480px) {
  .overlap_img {
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 20px;
  }
}

HTML保持原有结构即可，无需修改 #

<div class="main_left_container">
  <div class="image_container">
    <a href="#services">
      <picture>
        <img src="https://i.imgur.com/Fi7IsGd.jpeg" alt="dcbel-uBKg9f0aUrY-unsplash.jpg">
      </picture>
    </a>
  </div>
  <div class="overlap_img">
    <h3 class="cc-iat-title">Fast Charging Car</h3>
    <p class="cc-iat-text">
      Probably the coolest thing evar!!1 We can program this for you.
    </p>
    <a href="/services/programming/" class="button" style="padding-left: 3rem; padding-right: 3rem;">
            MORE DETAILS
          </a>
  </div>
</div>

• 用aspect-ratio替代原来写死的固定px高度，让背景图容器宽度变化时高度自动按比例计算，和图片的缩放逻辑保持一致，aspect-ratio的比例值可以根据实际视觉需求调整，匹配设计稿的宽高比即可
• 把固定px的内边距、字体大小、按钮内边距改成clamp()+vw单位的响应式值，小屏自动缩小，大屏保持原有尺寸，不会出现内容溢出
• 给img标签加了height: auto和display: block，确保图片本身严格等比缩放，不会出现底部间隙
• 清除了block布局下无效的flex属性，删除了没有对应元素的无效.flex选择器代码
• 加了box-sizing: border-box，确保padding值不会把容器宽度撑大
• 补充了极小屏的适配规则，避免宽度小于480px时内容排版错乱

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