响应式网站图片无固定宽度，设置px单位仍随屏幕缩小如何解决？

问题根因 #

你为.single-image设置的固定px宽度不生效，是因为它是flex布局容器的直接子元素，flex默认给所有子项开启了flex-shrink: 1属性：当父容器的可用宽度小于所有子项宽度+间距+内边距的总和时，子项会被自动压缩，和你使用的长度单位无关。

修复方案 #

给.single-image添加flex-shrink: 0属性，禁用flex子项的自动收缩即可让固定宽度生效。如果需要避免小屏布局挤破，可选择两种适配方案：

• 给父容器.box-images添加overflow-x: auto属性，小屏时图片区域可横向滚动查看全量内容
• 搭配媒体查询，在不同屏幕宽度下调整.box-images的内边距或者.single-image的尺寸，适配不同设备

修改后完整CSS代码 #

.section-3{
    margin-bottom: 2.5rem;
}

.box-images{
    display: flex;
    align-items: center;
    height: 800px;
    padding: 0 368px;
    /* 可选：小屏超出部分横向滚动 */
    overflow-x: auto;
}

.single-image{
    width: 699px;
    height: 624px;
    margin: 0 32px;
    background-color: gray;
    /* 禁用flex自动收缩，固定宽度生效 */
    flex-shrink: 0;
}

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