设置max-width:1220px时flex-direction为column后图片消失如何解决

问题原因 #

你遇到的图片消失问题和flex布局切换排列方向后的高度计算逻辑有关，常见触发原因如下：

1. 横向排列时.main元素设置了固定高度，子元素默认会align-items: stretch拉伸占满高度；切换为纵向排列后，子元素如果没有设置高度/最小高度，会被内容撑开或者被压缩，如果你给图片设置了height: 100%，此时父容器高度未定义，百分比高度不生效，图片高度直接塌陷为0。
2. 图片所在的flex子项没有设置flex-shrink: 0，flex纵向排列时会优先压缩没有防收缩配置的子项，导致图片容器高度被压为0。

修复方案 #

调整媒体查询的规则，补充高度和防压缩配置即可，参考代码如下：

@media (max-width: 1220px) {
  .main {
    flex-direction: column;
    height: auto; /* 取消原有的固定高度限制，让容器高度随内容撑开 */
  }
  /* 下面的类名替换为你实际的图片父容器类名 */
  .main .image-wrapper {
    flex-shrink: 0; /* 禁止被压缩 */
  }
  .main img {
    width: 100%;
    height: auto; /* 替换原有的height: 100%配置，按比例自适应宽度 */
  }
}

调试建议 #

• 打开浏览器开发者工具的元素面板，选中消失的图片，查看「计算样式」栏的宽高数值，确认是否是高度塌陷导致的消失
• 检查.main所有父元素的高度设置，避免存在溢出隐藏overflow: hidden规则把高度不足的图片裁切隐藏

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