响应式布局中Flexbox子元素伸缩同步与重叠效果实现教程

/* 父容器：设置Flexbox布局 */
.main_left_container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1175px; /* 设置最大宽度 */
    display: flex; /* 启用Flexbox */
    position: relative; /* 为子元素的相对定位提供上下文 */
    padding: 20px; /* 增加一些内边距 */
    /* 默认情况下，子元素将横向排列 */
}

/* 所有直接子元素：实现弹性伸缩 */
.main_left_container > div {
    flex: 1; /* 关键：使子元素等比例伸缩 */
    /* 移除 image_container 和 overlap_img 中原有的 flex-basis, flex-shrink, flex-grow, width, min-width 等固定尺寸属性 */
}

/* 图片容器内的图片：确保图片填充其父容器 */
.image_container img {
    width: 100%;
    height: 100%; /* 确保图片高度也填充父容器 */
    object-fit: cover; /* 保持图片比例并覆盖容器，避免变形 */
}

/* 重叠内容容器：调整背景和定位 */
.overlap_img {
    background-image: url("https://dummyimage.com/640x360/ccc/aaa"); /* 使用示例背景图片 */
    background-size: cover;
    position: relative; /* 保持相对定位，以便在媒体查询中进行微调 */
    color: #fff;
    padding: 20px; /* 基础内边距 */
    display: flex; /* 内部内容也使用Flexbox，方便垂直居中或对齐 */
    flex-direction: column;
    justify-content: center; /* 垂直居中内容 */
}

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

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

/* 媒体查询：响应式调整 */

/* 屏幕宽度小于1250px时 */
@media (max-width: 1250px) {
    .overlap_img {
        min-width: 0; /* 确保元素可以收缩到最小 */
        position: relative; /* 保持相对定位 */
    }
}

/* 屏幕宽度小于1000px时：改为垂直堆叠布局 */
@media (max-width: 1000px) {
    .main_left_container {
        display: block; /* 父容器改为块级，子元素将垂直堆叠 */
        width: 100%;
        padding: 0; /* 移除左右内边距，让子元素可以占满宽度 */
    }

    .image_container {
        width: 100%; /* 图片容器占满宽度 */
    }

    .image_container img {
        width: 100%;
    }

    .overlap_img {
        position: relative; /* 保持相对定位 */
        height: 200px; /* 垂直堆叠后，给予固定高度 */
        padding: 45px 75px; /* 调整内边距 */
        margin-top: -80px; /* 向上偏移，实现重叠效果 */
        box-sizing: border-box; /* 确保 padding 不会增加总宽度 */
    }
}

/* 屏幕宽度小于875px时：进一步调整 */
@media (max-width: 875px) {
    .main_left_container {
        max-width: 100%; /* 允许容器完全占满宽度 */
    }
    .overlap_img {
        padding: 40px 50px; /* 调整内边距 */
        margin-top: -60px; /* 调整重叠偏移 */
        height: 180px;
    }
}

/* 屏幕宽度小于767px时 */
@media (max-width: 767px) {
    .overlap_img {
        padding: 30px 20px; /* 调整内边距 */
        margin-top: -50px;
        height: 160px;
    }
}

/* 屏幕宽度小于480px时：最小屏幕调整 */
@media (max-width: 480px) {
    .overlap_img {
        padding: 20px; /* 进一步缩小内边距 */
        margin-top: -40px;
        height: 140px;
    }

    .overlap_img h3 {
        font-size: 24px; /* 缩小标题字体 */
    }

    .overlap_img p {
        font-size: 16px; /* 缩小段落字体 */
    }

    .image_container img {
        min-height: 250px; /* 确保小屏幕下图片有最小高度 */
    }
}

<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