桌面媒体查询下.container元素重叠及图片消失问题排查求助

算力阿峰

2026-8-16

问题排查与解决方案

问题根源

.container-img无宽度占比：当.container切换成横向flex布局后，.container-img没设置flex属性或固定宽度，直接被压缩成0宽度，背景图自然看不到。
align-items: center的冲突：这个属性会让子元素在垂直方向居中，而非默认的拉伸填充父元素高度。.container-img本身没有内容，没有高度支撑，加上居中对齐后，高度直接坍缩为0，背景图根本没法渲染。

修复代码

修改媒体查询里的CSS，给.container-img加上flex:1，同时调整.container的对齐方式（或者直接移除align-items:center，默认的拉伸更适合当前布局）：

@media (min-width: 40em) {
    .container {
        min-height: 60vh;
        flex-direction: row;
        /* 移除align-items:center，让子元素自动拉伸填充高度 */
    }

    .container-img {
        background: url('images/image-product-desktop.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        z-index: 100;
        flex: 1; /* 让图片容器占据容器一半宽度 */
        /* 修正圆角，适配横向布局 */
        border-top-right-radius: 0;
        border-bottom-left-radius: 15px;
    }

    .container-desc {
        flex: 1;
        /* 对应修正右侧圆角 */
        border-top-right-radius: 15px;
        border-bottom-left-radius: 0;
    }
}