Flexbox布局中响应式子元素缩放不一致问题的解决方案

.main_left_container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1175px;
    display: flex; /* 启用Flexbox */
    position: relative;
    padding: 20px; /* 增加内边距，避免内容紧贴边缘 */
}

/* 为所有直接子元素应用flex: 1，实现等比例伸缩 */
.main_left_container > div {
    flex: 1; 
}

.image_container img {
    width: 100%; /* 图片宽度填充其父容器 */
    height: 100%; /* 图片高度填充其父容器，保持纵横比可能需要object-fit */
    display: block; /* 移除图片默认的底部空白 */
}

.overlap_img {
    background-image: url("https://dummyimage.com/640x360/ccc/aaa");
    background-size: cover;
    background-position: center; /* 确保背景图片居中 */
    position: relative; /* 保持相对定位，但移除初始的left/bottom偏移 */
    color: #fff;
    display: flex; /* 使内部内容也能弹性布局 */
    flex-direction: column; /* 垂直堆叠标题和段落 */
    justify-content: center; /* 垂直居中内容 */
    align-items: flex-start; /* 左对齐内容 */
    padding: 45px 75px; /* 初始内边距 */
}

.overlap_img h3 {
    margin-top: 0;
    font-size: 30px;
}

.overlap_img p {
    margin-top: 0;
    font-size: 18px;
}

/* 按钮样式保持原样，或根据需要调整 */
.overlap_img .button {
    /* ... 按钮原有样式 ... */
}

@media (max-width: 1250px) {
    .main_container { /* 假设存在一个外部容器 */
        max-width: 950px;
        margin-left: auto;
        margin-right: auto;
    }
    .overlap_img {
        min-width: 0; /* 确保元素可以缩小到0 */
        position: relative; /* 保持相对定位 */
        padding: 40px 60px; /* 调整内边距 */
    }
}

@media (max-width: 1000px) {
    .main_container {
        max-width: 850px;
        margin-left: auto;
        margin-right: auto;
    }
    .main_left_container {
        display: block; /* 在中等屏幕下切换为块级布局，元素垂直堆叠 */
        width: 100%;
        padding: 10px; /* 调整父容器内边距 */
    }
    .image_container {
        width: 100%; /* 确保图片容器占据全部宽度 */
    }
    .image_container img {
        width: 100%; /* 确保图片占据全部宽度 */
    }
    .overlap_img {
        position: relative;
        height: 200px; /* 调整重叠元素的高度 */
        padding: 45px 75px; /* 调整内边距 */
        margin-top: -50px; /* 可选：通过负外边距实现向上重叠效果 */
        left: 0; /* 确保不偏离 */
        bottom: 0; /* 确保不偏离 */
    }
}

@media (max-width: 875px) {
    .main_left_container {
        max-width: 100%; /* 父容器占据全部可用宽度 */
        padding: 5px;
    }
    .overlap_img {
        padding: 30px 40px; /* 进一步调整内边距 */
        height: 180px;
        margin-top: -30px; /* 调整重叠程度 */
    }
}

@media (max-width: 767px) {
    .overlap_img {
        padding: 20px 30px; /* 进一步调整内边距 */
        height: 150px;
        margin-top: -20px;
    }
    .overlap_img h3 {
        font-size: 24px;
    }
    .overlap_img p {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .overlap_img {
        padding: 15px 20px; /* 适用于极小屏幕 */
        height: auto; /* 高度自适应内容 */
        margin-top: 0; /* 在小屏幕上取消重叠，避免内容被遮挡 */
    }
    .overlap_img h3 {
        font-size: 20px;
    }
    .overlap_img p {
        font-size: 14px;
    }
    .image_container img {
        min-height: 250px; /* 确保图片在小屏幕下有最小高度 */
        object-fit: cover; /* 确保图片覆盖容器并保持纵横比 */
    }
}

<div class="main_left_container">
    <div class="image_container">
        <a href="#services">
            <picture>
                <img src="https://dummyimage.com/640x360/eee/aaa" 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>