移动端flex容器宽度超100% 调整后PC端图片偏移问题

• 移动端横向溢出、左侧留白的核心诱因是.zgrade类同时写死了width: 745px和min-width: 466px，当移动设备视口宽度小于466px时，元素会强制按最小宽度渲染，直接撑破父容器超出视口。
• 直接把容器宽度改成90%会影响PC端，是因为该规则写在了媒体查询外侧，覆盖了PC端原有的固定宽度基准，破坏了原有居中布局的尺寸逻辑。
• 给容器加overflow: hidden/auto会裁切图片，是因为内部元素固定尺寸没有做自适应适配，超出父容器的部分被直接隐藏或触发滚动条。

所有修改仅作用于移动端断点，PC端原有展示效果100%保留，HTML结构无需调整，直接替换CSS即可

/* 以下PC端原有样式全部保留，未做任何改动 */
.container1 {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.container1 > div {
    padding: 0px 5px;
    max-width: 100%;
    height: 325px;
}

.container1 div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 补全基础防溢出规则，避免图片撑破容器 */
    max-width: 100%;
}

.zgrade {
    position: relative;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden; 
    width: 745px;
    min-width: 466px;
}

.zgradeimg {
    width: 500px;  
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.zgrade:hover img {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

/* 仅在移动端断点内新增覆盖规则，不影响PC端逻辑 */
@media screen and (max-width: 780px) {
    .container1 {
        flex-direction: column;
        overflow-x: hidden;
    }

    .container1 > div {
        padding: 10px 5px;
        width: 100%;
        /* 移动端高度自适应，避免图片变形 */
        height: auto;
    }

    .zgrade {
        /* 重置PC端固定宽度、最小宽度规则 */
        width: 90%;
        min-width: unset;
        max-width: 90%;
    }
}

• 移动端：固定宽度限制被重置，容器按视口宽度自适应，横向溢出、左侧留白问题完全消失，图片不会被裁切，hover放大效果正常保留。
• PC端：原有尺寸、居中逻辑未做任何修改，图片展示、布局效果和之前完全一致，不会出现偏移问题。
• 无需给全局容器加裁切属性，不会出现内容截断、无法滚动查看的问题。

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